Does React Native styles support gradients?


I see that someone made this for it:

But is there support for it in RN itself? Something like

style = StyleSheet.create({
    backgroundGradient: "vertical",
    backgroundGradientTop: "#333333",
    backgroundGradientBottom: "#666666"

This question is tagged with react-native

~ Asked on 2015-08-15 18:31:35

The Best Answer is


Not at the moment. You should use the library you linked; they recently added Android support and it is by one of the main contributors of react-native.

~ Answered on 2015-10-06 17:53:08


First, run npm install expo-linear-gradient --save

You don't need to use an animated tag, but this is what I was using in my code.

inside colors={[ put your gradient colors ]}

then you can use something like this:

 import { LinearGradient } from "expo-linear-gradient";
 import { Animated } from "react-native";

    colors={["rgba(255,255,255, 0)", "rgba(255,255,255, 1)"]}
    style={{ your styles go here }}/>

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

~ Answered on 2020-01-13 22:22:17

Most Viewed Questions: