How to create a Diagonal LinearGradient?

How to / Third Party Tooling
1

I wanted the expo LinearGradient apply diagonally. My code is…

<LinearGradient
colors={[‘#ffff33’, ‘#ff471a’]}
start={{x: 0, y: 1}}
end={{x: 1, y: 0}}
style={styles.kitchenSpecGrad}

but its show the gradient horizontally. Can anybody help.
Thanks in advance.

2

Hi there, the start and end properties are arrays, rather than {x,y} objects. So this might work:

start={[0,1]}
end={[1,0]}
2 Likes
3

Hi Ben, that doesn’t work. Using expo SDK 36.0. Changing the y of the [x, y] array has no affect on the gradient unless the x of start and end are equal, in which case a vertical gradient is created. No matter what values i use for the start={[x,y]} and end={[x,y]} arrays, the gradient is always a strictly vertical or strictly horizontal gradient.

4

Hi

I answered here.

Does that not work for you?

5

start={{ x: -1, y: 0 }}
end={{ x: 1, y: 0 }}
it works for me

6

This works for me! Thank you Ben!!