React Native Create Rounded Corners Button Android iOS Tutorial

By default buttons created in react native application is in rectangle shape and dose not support rounded corners. So in this tutorial we would going to make a Rounded Corners Button in react native app using TouchableOpacity. TouchableOpacity component is used to wrap a view which can respond on button click events. So let’s get started 🙂 .

Contents in this project Create Rounded Corners Button in React Native app :

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

2. Import AppRegistry, StyleSheet, Text, View, TouchableOpacity and Alert in your project.

3. Create a function named as ButtonClickCheckFunction. This function would call on TouchableOpacity onPress event.

4. Create a Root View inside the render’s return block.

5. Create TouchableOpacity component inside the Root View.

style : Used to call the CSS Style class.

activeOpacity : Determines opacity of wrapped view when its clicked.

onPress : Calls the function on TouchableOpacity onPress event.

6. Create CSS Style classes for Root ViewTouchableOpacity and Text component.

7. Complete source code for index.android.js / index.ios.js file:

Screenshot in Android Application :

Rounded Corners Button

Screenshots in iOS mobile application :

Leave a Reply

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