In this example, you will learn to react native gradient button. I explained simply about linear gradient background color in react-native. In this article, we will implement a linear gradient component in react native. you can understand the concept of how to add a linear gradient in react native. Follow the below tutorial step of how to make the gradient background in react native.

In this example, We will create linear gradient color in react native.you can easily and simply use the expo-linear-gradient library in the mobile app.below this example.

In the first step run the following command to create a project.

expo init ExampleApp

In the first step install expo-linear-gradient library in your project.

expo install expo-linear-gradient

In this step, You will open the App.js file and put the code.

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

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <TouchableOpacity style={styles.button}>
      <LinearGradient colors={['#43D4FF', '#38ABFD', 'red']} style={styles.gradient}>
        <Text style={styles.text}>Gradient Button</Text>
      </LinearGradient>
      </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems:'center',
    justifyContent:'center',
  },
  gradient: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center',
    borderRadius: 5
  },
  button: {
    width: '70%',
    height: 45,
  },
  text: {
    color: 'white',
    fontSize: 16
  }
});

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...