React Native Set Gradient Effect Background on TextInput Android iOS

In our previous tutorial we have created Button with Gradient Effect using the react-native-linear-gradient GitHub NPM library. This tutorial is the second part of Gradient Button Tutorial. In this tutorial we would going to create a react native app with Set Gradient Effect Background on TextInput with rounded corner border in react native android and iOS application. We are using the Linear gradient with Silver and white color combination. This type of TextInput is very common in iOS devices and it is also popular between developer as iPhone EditText.

Contents in this project Set Gradient Effect Background on TextInput in React Native Android iOS example tutorial:

1. We are using the react-native-linear-gradient library in to make the Gradient effect, So we have to install react-native-linear-gradient library in our project. To install Open your React Native Project folder in CMD and run this command  npm install react-native-linear-gradient --save . See the below screenshot .

Screenshot of Command Prompt/Terminal after successfully installation of this library :

2. Now run the  react-native link command in CMD in your project. This command would re-arrange the complete React Native project and add the Linear gradient library in its own index.

3. Import StyleSheet, View and TextInput component in your project.

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

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

6. Create the LinearGradient component in Root View. This would render the Gradient Effect background on TextInput.

colors : This prop is used to pass the color combination of Gradient. You can also pass more then 2 colors in this prop.

7. Create a Sub Child View inside the LinearGradient. We would wrap the TextInput in this child View.

8. Create CSS Style for Root View, Child View, TextInput and LinearGradient component.

9. Complete source code for App.js File :

Screenshot in Android device :

Gradient_TextInput_Android_1Screenshot in iOS device :

Set Gradient Effect Background on TextInput

2 Comments

  1. Can we have gradient color on border of the input?

Leave a Reply

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