Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is React Native Linear Gradient?
3.
How it Works?
4.
Setup and Installation
5.
React Native Linear Gradient Props
5.1.
1. colours
5.2.
2. start
5.3.
3. end
5.4.
4. locations
5.5.
5. useViewFrame
5.6.
6. angle
5.7.
7. style
5.8.
8. children
6.
Types of Linear Gradients 
6.1.
1. Vertical Gradients 
6.2.
2. Horizontal gradients
7.
Examples
7.1.
Vertical Gradient 
7.2.
Horizontal Gradient 
8.
Frequently Asked Questions
8.1.
What is React Native Linear Gradient?
8.2.
How do you give a linear gradient border in react-native?
8.3.
How do you use gradient color in react?
8.4.
What is the linear gradient library in React Native?
9.
Conclusion
Last Updated: Mar 27, 2024
Easy

React Native Linear Gradient

Author Dhruv Rawat
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

React Native Linear Gradient is a simple library that untangle the process of adding linear gradients to React Native applications. React Native library offers developers the ability to create custom gradients with more than one colours and directions, offers a wide range of tools and libraries to help developers achieve stunning UI designs.

react native linear gradient

One such powerful library is React Native Linear Gradient library which enables developers to implement beautiful gradients in their mobile app designs.

In this article, we’ll explore horizontal and vertical linear gradients and will learn how to add them to React Native apps. 

What is React Native Linear Gradient?

React Native Linear Gradient is a library that allows developers to easily add smooth colour linear transitions, known as gradients, to the user interface of their React Native mobile applications.

With React Native Linear Gradient, developers can easily apply gradients to various UI components, such as backgrounds, buttons, headers and more. Gradients help in making the visual aspect of a mobile app more aesthetic by creating dynamic colour effects.

Also see,  React Native Reanimated

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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:

output for vertical gradient


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:

Output for horizontal gradient

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:

Check out The Interview Guide for Product Based Companies and some famous Interview Problems from Top Companies, like AmazonAdobeGoogle, 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!”

Live masterclass