LinearGradient does not allow for diagonal gradients.

[iway1]

1. SDK Version: 36.0
2. Platforms(Android/iOS/web/all): iOS (Maybe All?)

Expo’s linear gradient simply does not allow for diagonal gradients, even though it seems like it is supposed to support them.

In the iOS simulator, with iPhone 11 and iOS 13.3, I do something like this:

<LinearGradient start={[0.0,0.0]} end={[1.0, 1.0]} />

The result is an horizontal gradient, though it should be a diagonal. In case I am misunderstanding the start and end parameters, none of the following results in a diagonal gradient, instead it results in either a horizontal or vertical gradient:

<LinearGradient start={[0.0,1.0]} end={[1.0, 0.0]} />
<LinearGradient start={[1.0,0.0]} end={[0.0, 1.0]} />
<LinearGradient start={[1.0,1.0]} end={[0.0, 0.0]} />

[wodin]

Hi

The following works for me in both Android and iOS:

import React from 'react';
import { View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <LinearGradient
        colors={['lightblue', 'black', 'lightgreen']}
        start={[0.0, 0.0]}
        end={[1.0, 1.0]}
        style={{ flex: 1 }}
      />
    </View>
  );
}

[iway1]

Edit: I spoke to soon. Still not working for me. I’ll do some more digging and come back with another edit, going to test it on some different iOS devices.

Edit 2:

Okay so it works, but only when the height of the LinearGradient is larger. If i set the height of the linear gradient to less than 100 the diagonal gradient no longer renders, and it renders a horizontal gradient instead. In my case the height of the gradient is very small, something like 30 or so. In this case only vertical and horizontal gradients can be rendered. I believe this is a bug with expo’s LinearGradient. iOS 13.3 iPhone 11. Thanks for the reply.

[wodin]

This works for me on Android and iOS:

Diagonal gradient - Snack

I’ve set start and end such that the angle of the gradient should be 45°.
On the Snack Web preview this causes a diagonal gradient, but the angle is incorrect.
On Android and iOS it works.

If I use start={[0, 0]} end={[1, 1]} then the Web preview looks like it’s closer to a horizontal gradient, but not quite. On Android and iOS it looks horizontal.

So it does seem to me as if there might be a problem with setting the start/end points of the gradient based on the start/end params and that the behaviour differs between Web and mobile.

EDIT: Maybe you can get an SVG LinearGradient to work. According to the documentation it seems like it should work, but I was getting weird errors.