[expo-linear-gradient] Unable to create an angled gradient

[kkelley-leftbrain]

Please provide the following:

1. SDK Version: 3.28.2
2. Platforms(Android/iOS/web/all): Android/iOS
3. Add the appropriate “Tag” based on what Expo library you have a question on.

After checking the readme a couple of times, I’m only seeing colors/start/end/locations as the params for the LinearGradient component. Per the docs;

start with a value of { x: 0.1, y: 0.2 } means that the gradient will start 10% from the left and 20% from the top, and

end with a value of { x: 0.1, y: 0.2 } means that the gradient will end 10% from the left and 20% from the bottom.

With the added note,
On web , this only changes the angle of the gradient because CSS gradients don’t support changing the end position.

So quickly, are angles only supported on web? Also, the distinction of the start-y value being from the top vs the end-y value being from the bottom seemed key, but tinkering with that hasn’t yielded any results for me either.

I would figure a start: {[0, 1]} end: {[1,0]} or similar (like one user claimed worked here) would achieve some sort of spread left-to-right, top-to-bottom effect, but I know that in general there are some limitations within react native preventing gradients via css.

There’s some obvious workarounds like background images, potential other libraries, etc., but am I perhaps trying to do something not supported?

Cheers,

[kkelley-leftbrain]

Checking in - is this not a common issue for others?

[notbrent]

Linear Gradient - Snack

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        colors={['rgba(0,0,0,0.8)', 'transparent']}
        start={{ x: 0, y: 0}}
        end={{x: 0.5, y: 0.5}}
        style={styles.background}
      />
    </View>
  );
}

[kkelley-leftbrain]

Thanks for the reply @notbrent

Adjusting the locations param I was able to get a clearer picture of what’s going on.

In your example (with the additional view container/styles) I notice that the 80% black appears to start off-screen, and as I further adjusted the end-values, the results were a bit hard to predict.

Is the x/y-position of start/end making a line bisecting the gradient direction itself?

Cheers

[notbrent]

here is how it is described in apple docs: Apple Developer Documentation

startPoint
The coordinate that defines the starting point of the gradient.

endPoint
The coordinate that defines the ending point of the gradient.

not that helpful, but perhaps you can dig deeper on this api to get more understanding

related code: expo/EXLinearGradientLayer.m at f3798cd29e8d11848df057f7cf7f2d522524e558 · expo/expo · GitHub

[kkelley-leftbrain]

Thanks again. I’ll go ahead and mark this as solved, thank you for your patience.

Cheers!