This tutorial is focused on how to make background color linear gradient. I explained simply about how to set a gradient background in react native. I’m going to show you about react native linear gradient. let’s discuss about how to create different gradient backgrounds in react native.

In this example, We will create to background image linear gradient in react native. The most popular library for this kind of stuff is expo-linear-gradient. Without any further ado, Let’s experience them in turn.

In the first step run the following command to create a project.

expo init ExampleApp

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

expo install expo-linear-gradient

npm install expo-linear-gradient --save

In this step, You will open the App.js file and put 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}>
      <Text style={styles.text}>Linear Gradient</Text>
      <LinearGradient 
      colors={['red', 'black']} 
      start={{
        x: 0,
        y: 0
      }}
      end={{
        x: 1,
        y: 1
      }}
      style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 100,
    paddingHorizontal: 30,
  },
  box: {
    width: '100%',
    height: 200,
  },
  text: {
    textAlign: 'center',
    fontSize: 24
  }
});

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...