How to create Linear Gradient in React Native

Table of Contents

Adding Linear Gradient to your project

Let me show you an example of how to create a linear gradient in react-native. A linear gradient is defined by the axis where two or more colors comes at a point. The colors of the gradient can be determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points. When it comes to react native we can use comes with react-native-linear-gradient library .


Using Yarn
					yarn add react-native-linear-gradient

Using Npm
					npm install react-native-linear-gradient --save

With React Native >= 0.60
					npx pod-install
Linking (for React Native <= 0.59 only)
					react-native link react-native-linear-gradient



1. IOS iOS (with CocoaPods)

Add the following line to your Podfile:

					pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

					npx pod-install
2. IOS iOS (without CocoaPods)
  • Open your project in Xcode
  • Right click on Libraries and click Add Files to “Your Project Name”.
  • Look under node_modules/react-native-linear-gradient/ios and add BVLinearGradient.xcodeproj.
  • Add libBVLinearGradient.a to Build Phases -> Link Binary With Libraries.
  • Click on BVLinearGradient.xcodeproj in Libraries and go the Build Settings tab.
  • Double click the text to the right of Header Search Paths and verify that it has $(SRCROOT)/../react-native/React – if it isn’t, then add it. (Screenshot).
3. Android

In android/settings.gradle

					include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')


In android/app/build.gradle add:

					dependencies {
    implementation project(':react-native-linear-gradient')


In android/app/src/main/java/com/{YOUR_APP_NAME}/ for react-native < 0.29, or android/app/src/main/java/com/{YOUR_APP_NAME}/ for react-native >= 0.29 add:

					// ...

import com.BV.LinearGradient.LinearGradientPackage; // <--- This!

// ...

protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new LinearGradientPackage() // <---- and This!

4. Windows (WPF)
  1. in windows/MyApp.sln Add -> Existing Project: node_modules/react-native-linear-gradient/windows/LinearGradientWPF/LinearGradientWPF.csproj

  2. in windows/MyApp/MyAppWPF/MyAppWPF.csproj Add -> Reference -> LinearGradientWPF

  3. in windows/MyApp/MyAppWPF/AppReactPage.cs add: using LinearGradient; and

					public override List<IReactPackage> Packages => new List<IReactPackage>
  new LinearGradientPackage()



The following code will produce something like this:


					import LinearGradient from 'react-native-linear-gradient';

// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook

// Later on in your styles..
var styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',


Horizontal gradient

Using the styles from above, set start and end like this to make the gradient go from left to right, instead of from top to bottom:

					<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook


Text gradient (iOS)

On iOS you can use the MaskedViewIOS to display text with a gradient. The trick here is to render the text twice; once for the mask, and once to let the gradient have the correct size (hence the opacity: 0):

					<MaskedViewIOS maskElement={<Text style={styles.text} />}>
  <LinearGradient colors={['#f00', '#0f0']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
    <Text style={[styles.text, { opacity: 0 }]} />



In addition to regular View props, you can also provide additional props to customize your gradient look:


An array of at least two color values that represent gradient colors. Example: ['red', 'blue'] sets gradient from red to blue.


An optional object of the following type: { x: number, y: number }. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: { x: 0.1, y: 0.1 } means that the gradient will start 10% from the top and 10% from the left.


Same as start, but for the end of the gradient.


An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors prop. Example: [0.1, 0.75, 1] means that first color will take 0% – 10%, second color will take 10% – 75% and finally third color will occupy 75% – 100%.

  start={{x: 0.0, y: 0.25}} end={{x: 0.5, y: 1.0}}
  colors={['#4c669f', '#3b5998', '#192f6a']}
  <Text style={styles.buttonText}>
    Sign in with Facebook



I hope you understand how to create Linear Gradient in React Native. Thank you for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *