Animated Linear Gradient "needs >= 2 number of colors"

[virusvn]

Hello guys, thanks for making great module.

I created an animated component is using linear-gradient (https://www.npmjs.com/package/react-native-svg-animated-linear-gradient).
It works well on iOS, but on android it displayed error: "needs >= 2 number of colors"

Is there any ideas? :)

[ui2code]

The error occurs when the offset values are the same. Ex:

<LinearGradient id="halfGradient">
    <Stop offset="100%" stopColor="#ffcc00" stopOpacity="1" />
    <Stop offset="100%" stopColor="#cccccc" stopOpacity="1" />
  </LinearGradient>

[virusvn]

Thanks @hemersonvianna, you gave me an idea to fix this issue.
Just make sure all offset of stop is different, the issue will be gone.
This's not a bug of this repo.

[raphael-leger]

The reason of this error can also just be because the number of colors given to the gradient is 0 or 1.

The documentation of expo-linear-gradient states that "at least two colors are required."
Actually the error message says it, perhaps in a clumsy way if within a long stack trace: "needs >= 2 number of colors".

Some unexpected TypeScript cast + the fact that iOS does not catch the bug can make the bug invisible until it reaches Android.

import { LinearGradient } from "expo-linear-gradient";

const colors = ["blue"];

// /!\ Example of unsafe TypeScript cast that hides the fact that there should be at least 2 colors
// and lets everything appear to work on iOS, but not on Android - which throws the error
return <LinearGradient colors={colors as [string, string, ...string[]]} />;

So the fix in this case is to ensure that this condition is respected before using a linear gradient.
If not, a simple view with a plain background could be used instead of the gradient for example:

import { LinearGradient } from "expo-linear-gradient";

const colors = ["blue"];

if (colors.length === 0) {
    return null;
} else if (colors.length === 1) {
    return <View style={{ backgroundColor: colors[0] }} />;
}
return <LinearGradient colors={colors as [string, string, ...string[]]} />;