Does React Native styles support gradients?

81

I see that someone made this for it: https://github.com/brentvatne/react-native-linear-gradient

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


54

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


7

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";

 <AnimatedLinearGradient
    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: