How to Create a Gradient Color 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 the following command:

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

If you are using yarn then you can use the following command:

yarn add react-native-linear-gradient

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

pod install

If you are using react naive version less than 0.60 then you may need to follow manual steps given here.

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

// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>

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

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

// create a component
class App extends Component {
  render() {
    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>
    );
  }
}

// define your styles
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
  }
});

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

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

react native gradient button example

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

Leave a Reply

%d bloggers like this: