Unlock the Power of Gradients in Your React Native App

What are Gradients?

Gradients are a design technique that blends multiple colors together in a smooth transition, adding visual interest to your user interface and guiding user attention. Think of the Instagram logo – a perfect example of a gradient in action!

Getting Started with react-native-linear-gradient

To add gradients to your React Native app, we’ll use the react-native-linear-gradient library. First, set up a new React Native project and install the library:

npm install react-native-linear-gradient

Then, import the LinearGradient component:

import { LinearGradient } from 'eact-native-linear-gradient';

Understanding LinearGradient Props

The LinearGradient component takes in several props that determine how the gradient will be displayed:

• colors: Pass the colors you want to display, ordered in the sequence you want them to appear.
• start: Indicates where the gradient will start, passing coordinates to the x and y-axis.
• end: Similar to start, but indicates where the gradient finishes.
• locations: An array of numbers defining where each color will stop in the gradient.

Building Different Types of Gradients

Now that we understand the fundamentals, let’s build a few different types of gradients.

Vertical Gradients

Create a vertical gradient, which is the default for react-native-linear-gradient. The gradient starts from the top center and goes all the way down to the bottom center.

<LinearGradient
  colors={['#FF69B4', '#33CC33']}
  style={{ flex: 1 }}
/>

Horizontal Gradients

Combine the start and end properties to create a horizontal gradient. For a horizontal gradient, you want it to start at the left center and end at the right center.

<LinearGradient
  colors={['#FF69B4', '#33CC33']}
  start={{ x: 0, y: 0.5 }}
  end={{ x: 1, y: 0.5 }}
  style={{ flex: 1 }}
/>

Diagonal Gradients

Update the start property to create a diagonal gradient. Altering the x-axis value shifts the top point that our gradient starts from, while adjusting the y-axis value determines where the gradient will start.

<LinearGradient
  colors={['#FF69B4', '#33CC33']}
  start={{ x: 0.3, y: 0.2 }}
  end={{ x: 0.7, y: 0.8 }}
  style={{ flex: 1 }}
/>

Locations Prop in Action

The locations prop determines where a color will stop in the gradient and maps up to the corresponding color values. Let’s see it in action!

<LinearGradient
  colors={['#FF69B4', '#33CC33', '#666666']}
  locations={[0, 0.5, 1]}
  style={{ flex: 1 }}
/>

Bonus: Real-World Use Cases

Let’s review a few use cases for LinearGradients:

• Full-Screen Multi-Color Background
• Button with Gradient Background
• Button with Gradient Border

Create a new file called Home.js and update index.js to point to it as the root file. Then, let’s jump to the new Home.js file and create these examples.

import React from 'eact';
import { View, Text, TouchableOpacity } from 'eact-native';
import { LinearGradient } from 'eact-native-linear-gradient';

const Home = () => {
  return (
    <View>
      <LinearGradient
        colors={['#FF69B4', '#33CC33']}
        style={{ flex: 1 }}
      >
        <Text>Full-Screen Multi-Color Background</Text>
      </LinearGradient>

      <TouchableOpacity>
        <LinearGradient
          colors={['#FF69B4', '#33CC33']}
          style={{ padding: 20, borderRadius: 10 }}
        >
          <Text>Button with Gradient Background</Text>
        </LinearGradient>
      </TouchableOpacity>

      <TouchableOpacity>
        <LinearGradient
          colors={['#FF69B4', '#33CC33']}
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={{
            padding: 20,
            borderRadius: 10,
            borderWidth: 1,
            borderColor: 'transparent',
          }}
        >
          <Text>Button with Gradient Border</Text>
        </LinearGradient>
      </TouchableOpacity>
    </View>
  );
};

export default Home;