How to create a Diagonal LinearGradient?

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

colors={[’#ffff33’, ‘#ff471a’]}
start={{x: 0, y: 1}}
end={{x: 1, y: 0}}

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

1 Like

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


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.


I answered here.

Does that not work for you?

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

This works for me! Thank you Ben!!

1 Like