How to Create Linear Gradient Background in React Native

React Native doesn’t support gradient colors out of the box. Fortunately, there is a cool library named react native linear gradient which helps to use gradient patterns in react native apps. In this blog post, let’s see how to create a gradient background for any screen in react native using react native linear gradient library.

First of all, add react native linear gradient library to your project using the following command.

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

For ios, run the following command from /ios folder to complete the installation.

pod install

If you are using react native version less than 0.60 then follow installation instructions from here.

You can use this library very easily. The basic usage of the library is as given below:

<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={{ flex:1 }}>
</LinearGradient>

The following code snippet helps you to create gradient background for your screen.

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

// create a component
class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <LinearGradient colors={['#2974FA', '#38ABFD', '#43D4FF']} style={styles.gradient}>        
      </LinearGradient>
      </View>
    );
  }
}

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gradient: {
    flex: 1,
  }
});

//make this component available to the app
export default App;

The output will be as given below:

gradient bacground react native

I hope this blog post will help you to create beautiful screens with gradient colors and patterns.

Leave a Reply

%d bloggers like this: