Add Linear Gradient

Advertisement

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:

Installing expo-linear-gradient

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.

%d bloggers like this: