How to Create a Gradient Color Button in React Native?

Nov 09, 2022 . Admin

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 can easily and simply use the expo-linear-gradient library in the mobile app.below this example.

Step 1: Download Project

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

expo init ExampleApp
Step 2: Install Library

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

expo install expo-linear-gradient
Step 3: App.js

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>

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

export default App;
Step 4: Run Project

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

expo start

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


It will help you...

#React Native