Add Linear Gradient

React Native not have added official support to add Linear Gradients. We have different options to add a linear gradient into the React Native app.

In this article we are going to see:

I’m going to show you how to use the Linear Gradient with the LinearGradient component provided by Expo.io.

#Installation Installation

Use below command to install the LinearGradient component from expo library.

expo install expo-linear-gradient

After executing the above command you can see something like the below screenshot:

Top ↑

#Usage Usage

Step 1: Import LinearGradient from expo-linear-gradient.

E.g.

import { LinearGradient } from 'expo-linear-gradient';

Step 2: Add colors in the colors prop.

E.g.

<LinearGradient
        colors={['#7F00FF', '#E100FF']}
/>

Top ↑

#Example Example

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

let LinearGradientDemo = () => {
  return (
      <LinearGradient
        colors={['#7F00FF', '#E100FF']}
        style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
        }}
      >
        <Text style={{
            backgroundColor: 'transparent',
            fontSize: 30,
            color: '#fff',
            fontWeight: 'bold',
          }}>
          Linear Gradient
        </Text>
      </LinearGradient>
  );
}

export default LinearGradientDemo;

NOTE: Here, I have used the <Text> component just for demo purposes. Also added the style param just to look example nice.

You can see the output of above code as below screenshot:

Top ↑

#Explanation Explanation

I have added the LinearGradient as below:

<LinearGradient
        colors={['#7F00FF', '#E100FF']}
        style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
        }}
>

In colors parameter accept two colors #7F00FF and #E100FF.