Add gradient colors to your background, borders, and Text in React Native

If it were as easy as writing a single line of CSS to add gradient colors to your React Native components.

Thankfully, the large React Native community and its extensive libraries do make it easy as writing a single line of (not really CSS). And the library for our purpose is ‘react-native-linear-gradient’.

This tutorial is broken down into four parts:
1. Installing the library
2. Adding gradient colors to the background
3. Adding gradient colors to the borders
4. Adding gradient colors to Text

Installing the library

Now, if you are running a react-native version that is greater than 0.60, you do not have to worry about linking the project as it will be done automatically. So run the following in the terminal.

yarn add react-native-linear-gradient
OR
npm i react-native-linear-gradient

Then, reinstall the app in the device or emulator you are using. The library will be available to use now.

If it does not work or you need some help in linking the project, there are detailed instructions on their page: https://www.npmjs.com/package/react-native-linear-gradient.

Background Gradient

Let’s start with creating a simple banner that has a horizontal gradient background.

Again, you can customise the gradient direction in many ways which you can explore here: https://www.npmjs.com/package/react-native-linear-gradient.

Border Gradient

Adding the borders is a bit hacky. Inside the LinearGradient View that we made before we will add a View with flex 1 and a margin value (which is the border width) so it takes up all the space leaving behind a gradient border.

So basically, what we are doing is creating an outer container (gradient background) and an inner container (where the children components will go).

This means you will have two ‘borderRadius’ values to set — one for the gradient container and one for the inner container. What you will find is setting the same value for both will not be the best thing to do unless what you are making is a circle. The border looks better if the inner container has a border radius value less than that of the gradient container.

Text Gradient

We need another library to add gradient colors to text.

yarn add @react-native-community/masked-view
OR
npm i @react-native-community/masked-view

Again, as before, run the above in the terminal and if you have react-native ≥0.60, linking is automatic so just make sure you reinstall your app after installing the library.

After that is done, we will make a custom Text component that takes all the Text props and an additional colors prop that defines the colors to show in the gradient. You can add additional props that controls the start and end properties of LinearGradient if you want more control. I will leave it hardcoded to horizontal gradient for now.

Now, we can use this custom component anywhere in the app.

And that’s it. You can easily spice up your app now.

You can check the entire code here: https://github.com/shresthaprince/rn-gradients/tree/master