Create Gradient Shade Effect Button in React Native Android iOS Example

Gradient effect is a smoothly color changeable effect on a particular defined location with fix height and width. Gradient is common between all type of developer who wish to make their app or websites looks better then others. So in this tutorial we would going to create a react native app with Gradient Shade Effect Button using react-native-linear-gradient GitHub library and wrap the button with TouchableOpacity to make the gradient button clickable.

There are basically 2 types of gradient effects available in react native :

  1. Linear Gradient(Top to bottom, Bottom to top, Left to right, right to Left and Diagonally).
  2. Radial Gradient(Defined different center color).

Contents in this project Create Gradient Shade Effect Button in React Native Android iOS App Example:

1. We are using the react-native-linear-gradient GitHub npm library in our this project because there are no certain method available in react native to make the Gradient Shade Effect. So open your project name folder in command prompt and run the  npm install react-native-linear-gradient --save command inside it to install this library. See the below screenshot for more details 🙂 .

Screenshot of CMD / Terminal after successfully installed the library :

2. After done installation execute the  react-native link command. This command would refresh the whole project and index the newly installed modules in react native’s own library.

3. Import StyleSheet, View, TouchableOpacity, Text and Alert command in your project.

4. Import the LinearGradient module from react-native-linear-gradient library in your project.

5. Create a function named as SampleFunction() in your class. We would call this function on Gradient button click.

6. Create a Root View in render’s return block.

7. Now finally we would create 2 types of Gradient shade effect button in Root View. We would wrap the LinearGradient component in TouchableOpacity to make the LinearGradient clickable.

8. Create Style for LinearGradient, Root View and Text component.

9. Complete source code for App.js File :

Screenshot in Android device :

Gradient Shade Effect Button Screenshot in iOS device :

12 Comments

  1. app get crashed, not running the program, I think react-native-linear-gradient is not working for me. Now how do i do such gradient background view and view border shadow color?

  2. By using elevation i can set the default shadow of the view but not able to set custom shadow like shadow color.

  3. I think its only work for IOS not for android. Is it true?

  4. Considered using the library but I ended up stretching a 1px image for mine.

  5. Hi, i’ve tried your tutorial but i receive this error when running the project with npm start:
    “Invariant Violation: Native component for “BVLinearGradient” does not exist”
    How can i fix this?. Thanks!

    • Guillermo you need to first install the gradient library using npm install react-native-linear-gradient –save command then execute the react-native link command to link to project .

  6. How can i run this code with android .Thank!

Leave a Reply

Your email address will not be published. Required fields are marked *