How to set a gradient background in React Native

This article shows you how to implement a gradient background in both Expo and bare React Native (or old React Native CLI) projects.

At the time of writing, React Native doesn’t officially support linear gradients, so we’ll be using third-party libraries. The two most popular libraries for this kind of stuff are expo-linear-gradient (strongly recommended for new projects) and react-native-linear-gradient. Without any further ado, Let’s experience them in turn.

Using expo-linear-gradient

Note: This library is not only great for Expo but also nice for bare React Native.

Installation

Expo

Install expo-linear-gradient by running the following command in your project:

expo install expo-linear-gradient

React Native CLI

Important note: If you are creating a new project, we recommend using npx create-react-native-app instead of npx react-native init because it will handle the required configuration for you automatically. If you created your project by using npx react-native init, then spend 5-10 minutes checking this guide first.

Perform the following command in your project directory:

npm install expo-linear-gradient --save

If you’re making an app for iOS devices, you need to do an additional setup by running:

npx pod-install

Example

The code:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient 
      colors={['red', 'yellow']} 
      start={{
        x: 0,
        y: 0
      }}
      end={{
        x: 1,
        y: 1
      }}
      style={styles.box} />

      <LinearGradient
        colors={['#c0392b', '#f1c40f', '#8e44ad']}
        start={{x: 0, y: 0.5}}
        end={{x: 1, y: 1}}
        style={styles.button}
      >
        <TouchableOpacity>
          <Text style={styles.buttonText}>I am a button</Text>
        </TouchableOpacity>
      </LinearGradient>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 100,
    paddingHorizontal: 30,
  },
  box: {
    width: '100%',
    height: 200,
  },
  button: {
    marginTop: 50,
    paddingVertical: 20,
    paddingHorizontal: 40,
    borderRadius: 15
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    fontSize: 24
  }
});

Here’s the result on iOS and Android:

API

Parameters:

Check the official docs here for more details.

Using react-native-linear-gradient

This library has not been updated for a long time and it doesn’t work fine with Expo projects. In addition, the setup process is more tedious than using expo-linear-gradient in the first approach. If you’re developing an app with Expo, there is no reason to use this one.

Installation

Install react-native-linear-gradient by running:

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

One extra step is required for iOS. Go to <your project>/ios/Podfile and add this line if it doesn’t exist:

pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

Finally, execute the command below:

npx pod-install

Example

The code:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        colors={['#6c5ce7', '#ffeaa7']}
        start={{ x: 0.0, y: 0.25 }}
        end={{ x: 0.5, y: 1.0 }}
        locations={[0, 0.5, 0.6]}
        style={styles.box}
      />

      <LinearGradient
        start={{ x: 0.0, y: 0.25 }}
        end={{ x: 0.5, y: 1.0 }}
        locations={[0, 0.5, 0.6]}
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={styles.button}
      >
        <TouchableOpacity>
          <Text style={styles.buttonText}>I am a button</Text>
        </TouchableOpacity>
      </LinearGradient>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 100,
    paddingHorizontal: 30,
  },
  box: {
    width: '100%',
    height: 200,
  },
  button: {
    marginTop: 50,
    paddingVertical: 20,
    paddingHorizontal: 40,
    borderRadius: 15,
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    fontSize: 24,
  },
});

Screenshot on iOS and Android:

API

Parameters:

Check the official docs here for more details.

Conclusion

In this article, we went through 2 libraries to make gradient backgrounds in React Native. Both of them are simple and give good effects on Android as well as iOS. If you’d like to learn more new and interesting things in the modern React Native world, take a look at the following articles:

• How to Get the Window Width & Height in React Native
• React Native: Make a Button with a Loading Indicator inside
• How to render HTML content in React Native
• React Native FlatList: Tutorial and Examples
• How to create circle images in React Native

You can also check our React topic page and React Native topic page for the latest tutorials and examples.