2020-12-16 hit count image

let's see how to use react-native-linear-gradient to make the gradient background on RN(React Native) project.


it’s difficult to make the gradient background on RN(Reat Native). in this blog, we’ll introduce how to make the gradient background by react-native-linear-gradient library.


execute belwo command to install react-native-linear-gradient library to use the gradient on RN(React Native).

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

execute below command to link react-native-linear-gradient to RN(React Native) project.

react-native link react-native-linear-gradient

How To Use

below source code is about how to make the gradient by react-native-linear-gradient on RN(React Native). (source code is from react-native-linear-gradient official site)

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',

we use below source code to make the gradient background.

import LinearGradient from 'react-native-linear-gradient';
import styled from 'styled-components/native';
const Background = styled(LinearGradient)`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  colors={[item.background[0], item.background[1]]}
    x: item.direction.start.x,
    y: item.direction.start.y,
  end={{ x: item.direction.end.x, y: item.direction.end.y }}

also, when the page that has the gradient background is switched, we applied the animation to switch smoothly the gradient background. we referred below site to make the animation.


let’s make RN(React Native) project more beautiful by the gradient background.


Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.