How to create a Gradient Button in React Native

Sometimes, buttons with plain colors can be boring visually. Adding a button with multiple colors can make your button uber-cool in appearance – only if it matches your user interface and color selection. In this blog post, let’s check how to create a button with gradient colors in React Native.

You might know that react native doesn’t support gradient colors out of the box. You need to add react native linear gradient library to your project using any of the following commands:

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

or

yarn add react-native-linear-gradient

On ios, navigate to the ios folder of your project and run the following command:

pod install

If you are using react native expo then you just need to run the following command only.

npx expo install expo-linear-gradient

Here’s the snippet on how to use react native linear gradient generally.

import LinearGradient from 'react-native-linear-gradient';
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>

If you are using react native expo then you should import as given below.

import { LinearGradient } from 'expo-linear-gradient';

In the following example, I have a button with a gradient pattern composed of three colors.

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

const App = () => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button}>
        <LinearGradient
          colors={['#43D4FF', '#38ABFD', '#2974FA']}
          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;

The output of react native gradient button example is as given below:

I hope this blog post will help you to create some cool buttons in react native!