How to set a gradient background in React Native

Last updated on January 4, 2021 A Goodman Loading... Post a comment

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

At this time, 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 and react-native-linear-gradient (they are very similar in usage and API). 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 the library 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 to check this guide first.

Perform the following command in your project directory:

npm install expo-linear-gradient --save

If you’re make app for iOS devices, you need to make an additional set up 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:

PropDescription
colorsRequired. An array of colors that represent stops in the gradient. Example: [‘red’, ‘blue’]
startOptional. An object { x: number; y: number } or array [x, y] that represents the point at which the gradient starts, as a fraction of the overall size of the gradient ranging from 0 to 1, inclusive.
endOptional. An object { x: number; y: number } or array [x, y] that represents the position at which the gradient ends, as a fraction of the overall size of the gradient ranging from 0 to 1, inclusive
locationsOptional. An array that contains numbers ranging from 0 to 1, inclusive, and is the same length as the colors property. Each number indicates a color-stop location where each respective color should be located

Check the official docs here for more details.

Using react-native-linear-gradient

Note: This library has not been updated for more than one year but it works just fine. In addition, the setup process is simple for React Native CLI.

Installation

Run:

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

One extra step (for iOS only):

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:

PropDescription
colorsRequired. An array of at least two color values that represent gradient colors
startOptional. An optional object of the following type: { x: number, y: number }. Coordinates declare the position that the gradient starts at. Note that x and y are in the range 0 to 1
endOptional. An optional object of the following type: { x: number, y: number }. Coordinates declare the position that the gradient ends at. Note that x and y are in the range 0 to 1
locationsOptional. An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors prop.

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 would like to learn more about React Native, take a look at our React Native category page for more tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles