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

9 Answers

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.

3

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

1

Here is a good choice for gradients for both platforms iOS and Android:

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', },
});

Here is a production ready pure JavaScript solution:

<View styles={{backgroundColor: `the main color you want`}}> <Image source={`A white to transparent gradient png`}>
</View>

Here is the source code of a npm package using this solution:

Here is the gradient palette screenshot of saturation and brightness using this npm package:

EXPO? Well, use this method Linear Gradient in React Native using EXPO. (Updated Nov. 2021)

No Pod Installs, No Errors, No additional linked files.

expo install expo-linear-gradient

Then

import { LinearGradient } from 'expo-linear-gradient';
<View style={styles.container}> <LinearGradient // Background Linear Gradient colors={['rgba(0,0,0,0.8)', 'transparent']} style={styles.background} /> <LinearGradient // Button Linear Gradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.button}> <Text style={styles.text}>Sign in with Facebook</Text> </LinearGradient> </View>

Full Link here:

Looking for a similar solution I just came across this brand new tutorial, which lets you bridge a Swift gradient background () library while walking through every step to get a working React component.

It is a step-by-step tutorial, allowing you to build your own component by bridging the swift and objective-c component into a usable React Native component, which overrides the standard View component and allows you to define a gradient like the following:

 <LinearGradient style={styles.gradient} locations={[0, 1.0]} colors={['#5ED2A0', '#339CB1']} />

You can find the tutorial here:

1

React Native hasn't provided the gradient color yet. But still, you can do it with a NPM package called react-native-linear-gradient or you can click here for more info

1. npm install react-native-linear-gradient --save

2. use import LinearGradient from 'react-native-linear-gradient'; in your application file

3. <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}> <Text> Your Text Here </Text> </LinearGradient> 

Yes React Native Support Gradient Use react-native-linear-gradient library.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy