React Native Linear Gradient Example Tutorial

Sep 01, 2022 . Admin

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.

Step 1: Download Project

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

expo init ExampleApp
Step 2: Install library

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

expo install expo-linear-gradient
OR
npm install expo-linear-gradient --save
Step 3: App.js

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
  }
});
Step 4: Run Project

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...

#React Native