I'm in the progress of porting this project to support Windows and to verify my implementation was correct I decided to try the following example code to see if my generated gradient matched the screenshot.

<LinearGradient
  start={[0.0, 0.25]} end={[0.5, 1.0]}
  locations={[0,0.4,0.6]} // I tweaked this value but it doesn't really affect the issue at hand
  colors={['#4c669f', '#3b5998', '#192f6a']}
  style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>

Running this example against my code produced the following result, which given the start and end points seemed correct to me, but obviously is different from the screenshot in the readme.

Thinking maybe the screenshot associated with the code example for iOS was out of date I quickly ran the code example against the latest release and got this result:

• A is the angle we expect the gradient to be perpendicular to.
• B is the angle the angle would be perpendicular to if the starting x/y coordinates were flipped.
• C is the approximate angle the gradient is actually perpendicular to.

What appears to be happening, at least on iOS, is that the gradient angle is calculated for a square and then squashed down to fit into the rectangle.

In my mind this is a bug that needs to be addressed. The start/end points should be applied to the area the gradient is going to be applied to, not an arbitrary square. Is there an option that didn't get set in the Obj-C that would fix this unexpected behavior?