Does React Native styles support gradients?
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.
Just export your gradient as SVG and use it using react-native-svg
and when after you import your component set width and height and preserveAspectRatio="xMinYMin slice"
to scale an SVG gradient at your needs.
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);
Here is a good choice for gradients for both platforms iOS and Android:
https://github.com/react-native-community/react-native-linear-gradient
There are others approaches like expo, however react-native-linear-gradient have worked better for me.
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});