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.
|
1 2 3 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity ,Alert} from 'react-native'; |
3. Create a function named as ButtonClickCheckFunction. This function would call on TouchableOpacity onPress event.
|
1 2 3 4 5 |
ButtonClickCheckFunction = () =>{ Alert.alert("Button Clicked") } |
4. Create a Root View inside the render’s return block.
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
render() { return ( <View style={styles.MainContainer}> <TouchableOpacity style={styles.SubmitButtonStyle} activeOpacity = { .5 } onPress={ this.ButtonClickCheckFunction } > <Text style={styles.TextStyle}> SUBMIT </Text> </TouchableOpacity> </View> ); } |
6. Create CSS Style classes for Root View, TouchableOpacity and Text component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor: '#F5FCFF', }, SubmitButtonStyle: { marginTop:10, paddingTop:15, paddingBottom:15, marginLeft:30, marginRight:30, backgroundColor:'#00BCD4', borderRadius:10, borderWidth: 1, borderColor: '#fff' }, TextStyle:{ color:'#fff', textAlign:'center', } }); |
7. Complete source code for index.android.js / index.ios.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity ,Alert} from 'react-native'; export default class Myproject extends Component { ButtonClickCheckFunction = () =>{ Alert.alert("Button Clicked") } render() { return ( <View style={styles.MainContainer}> <TouchableOpacity style={styles.SubmitButtonStyle} activeOpacity = { .5 } onPress={ this.ButtonClickCheckFunction } > <Text style={styles.TextStyle}> SUBMIT </Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor: '#F5FCFF', }, SubmitButtonStyle: { marginTop:10, paddingTop:15, paddingBottom:15, marginLeft:30, marginRight:30, backgroundColor:'#00BCD4', borderRadius:10, borderWidth: 1, borderColor: '#fff' }, TextStyle:{ color:'#fff', textAlign:'center', } }); AppRegistry.registerComponent('Myproject', () => Myproject); |
Screenshot in Android Application :
Screenshots in iOS mobile application :
Also Read :
Add Rounded Corners Border to Text Component in React Native iOS Android
Add Set Rounded Corners Radius Border on Image in React Native
React Native Add onLongPress on Button using TouchableOpacity
React Native Change Button Upper Title Text Using State Dynamically
React Native Simple Modal Component iOS Android Example Tutorial
