React Native: Gradient Backgrounds

Gradients are nothing new to us. They are colorful, stylish and give our app/website a modern look. We love applying gradients to our backgrounds ( at least I do ) wherever we can. But how do we apply a gradient in React Native?

This post is a continuation of the React-Native: The Easy Way series. You can check all the other posts under my account. You can also follow for the next post.

As usual, we will be using Expo for this project. Expo has inbuilt support for gradients, whereas in React Native we have to depend on external dependencies.

Know the difference between Expo and React Native here.

As you might have already been familiar with how to create a new Expo project. I will skip the setup in this post. But you can check it out here.

After the project has been set up and you successfully managed to run it on your phone. Let's continue.

For the purpose of demonstration, I will clear up the default boilerplate View given by Expo. So our App.js should look something like this.

Now, we can import the LinearGradient component from ‘expo’. Now we need to keep in mind that this component is Expo specific and it does not come with React-Native. Hence instead of importing it from ‘react-native’ like always, we need to import it from ‘expo’.

import { LinearGradient } from 'expo'

Now the rest of the process is extremely simple. We can use the component just like we use every other component in Expo.

The LinearGradient component takes in props of an array of colors. You can go crazy and include as many colors as you want in this array.

Another amazing point of using this inbuilt component is that we can nest other components inside this. For example, if we have a login screen with a card, which contains the input fields. We can use this component as the background for the card or the entire screen.

For this demo, I will put a Text component inside this and align it to the center.

Linear Gradient

Now this is great if we want a Linear Gradient. But what if we are looking for a Horizontal gradient or even a Diagonal gradient. Expo does not have separate components for them. Instead, the Linear Gradient component accepts a few more props.

Introducing the Start and End props to solve all your gradient needs!.

Now these props are super interesting, they accept x and y co-ordinates. So you can use these to create some super cool gradient effects for your applications.

I changed the colors to simple ‘blue, green, red, yellow’ to explain it a little more easily.

Lets consider start as A and end as B. So the above code snippet, shows us

A(0,0) to B(0,1). Meaning the position of A( the horizontal ) does not change, where as the position of B ( the vertical ) goes from 0 ( bottom ) to 1 ( top ). Hence we are getting the Linear effect. Now we can reverse this Linear effect by interchanging the y-co-ordinates for both the points.

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

Essentially making A(0,1) and B(0,0).

Gradient Reversed

Horizontal Gradients

Now lets try for a Horizontal gradient. For creating a horizontal gradient, we need to put the y-co-ordinates for both points the same. Since the only co-ordinate that would be changing is the x-co-ordinate.

Making it A(0,0) and B(1,0)

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

Horizontal Gradients

Diagonal Gradients

Now for to create a diagonal gradient that starts at the left bottom corner and ends at the top right corner. Its very simple. All we have to do is

Make A(0,0) and B(1,1)

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

Diagonal Gradients

You can check out the live project at :

Buy Me a Coffee ☕️

That’s it for this post. I'm planning on a Vue JS Series soon, so consider following me and if you enjoyed this post, help out by sharing it. Consider checking out my other cool posts on React-Native in my profile. See you soon.