Add Rounded Corner Borders to Text Input in React Native Android iOS

How to display rounded corner border around EditText Text Input component in React Native application using  borderRadius style attribute example tutorial.

Contents in this project Add Rounded Corner Borders to Text Input :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry, StyleSheet, TextInput and View component in import block.

3. Add View as parent view in render’s return block.

4. Create custom css class named as MainContainer just above the AppRegistry.registerComponent line.

5. Call the MainContainer class in View.

6. Create another class named as TextInputStyleClass . Using the TextInputStyleClass we have been setting up Typed text align with hint align center using textAlign , setting up height of Text Input using height, setting up border width using borderWidth, setting up border color using borderColor in hex color code, setting up border radius using borderRadiusborderRadius value is set as pixels. According to given value the corner edges of border can be curved.

7. Add TextInput component in View . Now set hint in Text Input using placeholder, hide the default bottom border of Text Input using underlineColorAndroid=’transparent’ and call the created style class using style={styles.TextInputStyleClass}.

8. Complete source code of index.android.js / index.ios.js file :

Screenshot :

Rounded Corner

Leave a Reply

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