Does React Native Styles Support Gradients?

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:

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:

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.