React Native Linear Gradient

How it Works?

React Native Linear Gradient enhances React Native applications by providing a straightforward way to incorporate linear gradients. After installation through npm or yarn, developers import the LinearGradient component from the library. This component is then used in the JSX to wrap around desired elements, introducing a gradient effect. The LinearGradient component accepts various props, including colors for gradient colors, start and end points, enabling customization. Leveraging native rendering capabilities ensures optimal performance. Overall, React Native Linear Gradient simplifies the process of integrating dynamic and visually appealing linear gradients into React Native components, enhancing the overall aesthetics of mobile applications.

Let us now start with the setup and installation: 

Setup and Installation

1. First, let’s create a new React Native project by typing the below command in the terminal:

npx react-native init LinearGradientDemo 
cd LinearGradientDemo  
npm start 

Let's take a look at the above instructions one by one :

• npx react-native init LinearGradientDemo: This command initializes a new React Native project named "LinearGradientDemo" using the React Native CLI. It sets up the project structure and installs the necessary dependencies. 
   
• cd LinearGradientDemo: This command changes the current directory to the "LinearGradientDemo" project folder. It allows you to navigate into the project directory to perform further actions. 
   
• npm start: This command starts the development server, which is responsible for bundling the JavaScript code and serving it to the emulator or device.
   

2. After this, install the react-native-linear-gradient library by using the following command:

npm install react-native-linear-gradient

3. If you're using React Native version 0.59 or lower, you'll need to link the library manually using the below command:

react-native link react-native-linear-gradient

After following the above steps, we are done with setting up our react native linear gradient in the react native project.

Now, we will look at some of the props related to liner gradients and how we can use them in the mobile app to create cool colour effects.

React Native Linear Gradient Props

Props are nothing but the properties that are set by the user in order to change the appearance of the gradient accordingly. 

Prop	Type	Required	Description
colors	Array of strings	Yes	An array of colors defining the gradient stops.
start	Object { x: number, y: number }	Yes	The starting point (coordinates) of the gradient.
end	Object { x: number, y: number }	Yes	The ending point (coordinates) of the gradient.
locations	Array of numbers	No	An array of numbers defining the location of each corresponding color in the colors array.
useViewFrame	Boolean	No	If true, the gradient will fill the entire view (frame). Defaults to false.
angle	Number	No	Angle of the gradient in degrees (iOS only).
style	ViewStyle	No	Additional styles for the LinearGradient component.
children	ReactNode	No	Components or text to be rendered inside the LinearGradient.

The React Native Linear Gradient component provides props such as:

1. colours

This prop takes an array of a minimum of two colours for the gradient. This sets the gradient from the array's first to the last colour. Colours can be specified using hex codes, RGB values or named colours.

For example, colors={[‘#FFFFFF00’, ‘#ffffff’, ‘rgb(20, 55, 235)’]}

2. start

• (optional)
• default value: start={{x: 0.5, y: 0}}
  
  These coordinates are to determine the position that the gradient will start. Their values are a fraction of the overall size of the gradient.

3. end

• (optional)
• default value: end={{x: 0.5, y: 1}}
  
  The ‘end’ prop determines the end of the gradient. The default value indicates that the gradient ends horizontally and vertically at the middle and bottom, respectively.

4. locations

The location prop defines the percentage of space each colour covers within the gradient, i.e., it determines where each colour’s gradient stops.

You can create custom gradients with specific colour arrangements, start and end positions, and gradient colour stop locations using these props in your React Native app.

5. useViewFrame

When set to true, the useViewFrame prop ensures that the gradient fills the entire view (frame). By default, it is set to false. This prop is useful for cases where you want the gradient to cover the entire component without manually specifying start and end points.

6. angle

The angle prop specifies the angle of the gradient in degrees. However, it is specific to iOS and does not affect Android. If set, the gradient will be drawn along the specified angle. This prop provides an additional level of customization for achieving diverse gradient orientations.

7. style

The style prop allows developers to apply additional styles to the LinearGradient component. This prop is particularly useful for controlling the overall appearance of the gradient, such as setting dimensions, margins, padding, or other visual properties.
children:

8. children

The children prop enables the inclusion of other React components, text, or elements inside the LinearGradient. Whatever is specified as children will be rendered within the gradient, allowing for the creation of complex and customized UI components incorporating linear gradients.

Types of Linear Gradients 

In React Native, the Linear Gradient component supports two types of gradients, i.e. horizontal and vertical.

1. Vertical Gradients 

A vertical gradient achieves a vertical gradient effect, i.e. colours blend from top to bottom vertically. 

To create a vertical gradient in React Native, you need to specify the start and end points of the gradient using the start and end props, respectively. Also, the locations prop is used to define the position of each colour in the gradient and the colours prop to specify the colours for the gradient.

2. Horizontal gradients

A horizontal gradient achieves a horizontal gradient effect, i.e. colours blend horizontally from left to right. 

To create a horizontal gradient in React Native, you need to specify the start and end points of the gradient using the start and end props, respectively. Also, define the specific colours for the gradient using the colours prop.

Examples

Let's discuss examples of each type, i.e. vertical and horizontal gradients.

Vertical Gradient 

We are going to create a basic vertical gradient using the code below:

import React from "react";
import LinearGradient from "react-native-linear-gradient";
import { Text, StyleSheet, View, AppRegistry } from "react-native";


const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center"
  },
  linearGradient: {
    alignItems: "center",
    justifyContent: "center",
    height: 300,
    width: 400
  }
});


class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <LinearGradient
          colors={["red", "yellow", "aqua"]}
          style={styles.linearGradient}
        >
          <Text>Coding Ninjas</Text>
        </LinearGradient>
      </View>
    );
  }
}


AppRegistry.registerComponent("App", () => App);


AppRegistry.runApplication("App", {
  rootTag: document.getElementById("root")
});

 

Output:

The above code displays a container with a smooth transition from red to yellow to aqua colour using the colours props with the text "Coding Ninjas" at the centre. 

By default, the gradient will move from the top centre to the bottom centre. 

Horizontal Gradient 

Let's make a horizontal gradient using start and end props as:

• start={{x: 0, y: 0.5}} 
• end={{x: 1, y: 0.5}}
   

import React from "react";
import LinearGradient from "react-native-linear-gradient";
import { Text, StyleSheet, View, AppRegistry } from "react-native";


const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center"
  },
  linearGradient: {
    alignItems: "center",
    justifyContent: "center",
    height: 300,
    width: 400
  }
});


class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <LinearGradient
          colors={["purple", "yellow", "green"]}
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.linearGradient}
        >
          <Text>Coding Ninjas</Text>
        </LinearGradient>
      </View>
    );
  }
}


AppRegistry.registerComponent("App", () => App);


AppRegistry.runApplication("App", {
  rootTag: document.getElementById("root")
});

Output:

The above code is the same as the previous one. We change the LinearGradient component by providing the coordinates x and y to start and end props and changing the colours props, starting with purple, transitioning to yellow, and ending with green. 

Now, the gradient is horizontally oriented (from left to right), and the container is styled with the text "Coding Ninjas" at the centre. 

Frequently Asked Questions

What is React Native Linear Gradient?

React Native Linear Gradient is a library that enables developers to incorporate linear gradient backgrounds into React Native applications, enhancing visual aesthetics.

How do you give a linear gradient border in react-native?

Achieve a linear gradient border by using the react-native-linear-gradient library and applying it to the component's borderImage property.

How do you use gradient color in react?

In React, use CSS or a library like styled-components to apply gradient colors. In React Native, utilize libraries like react-native-linear-gradient for gradient backgrounds.

What is the linear gradient library in React Native?

The prominent linear gradient library in React Native is react-native-linear-gradient. It simplifies the integration of linear gradients into React Native components.

Conclusion

Congratulations, you did a fantastic job!! This article has gone through the setup and installation of React Native linear Gradient and has discussed types of linear gradients with examples of each and discussed their props as well. At last, some frequently asked questions have been discussed.
 

Here are some more related articles:

• Difference Between ReactJs and React Native
• First App on React Native 
• Intro to React Native
   

Check out The Interview Guide for Product Based Companies and some famous Interview Problems from Top Companies, like Amazon, Adobe, Google, etc., on CodeStudio.
 

You can also consider our React Js Course to give your career an edge over others.

We hope you liked this article.

"Have fun coding!”