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 .

Installation

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)
Automatic
				
					react-native link react-native-linear-gradient

				
			

Manual

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}/MainActivity.java for react-native < 0.29, or android/app/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java for react-native >= 0.29 add:

				
					// ...

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

// ...

@Override
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()
}

				
			

Example

The following code will produce something like this:

react-native-linear-gradient

				
					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
  </Text>
</LinearGradient>

// 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>
</LinearGradient>

				
			

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 }]} />
  </LinearGradient>
</MaskedViewIOS>

				
			

Props

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

colors

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

start

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.

end

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

locations

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%.

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

				
			

react-native-linear-gradient

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 *