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 :
React Native Generate SHA256 Encoded Hash Key Android iOS Example
React Native Show Default Image Before loading Real Image PlaceHolder iOS Android Example
React Navigation Latest Version 5.x in React Native Example Tutorial
Add Permissions for Android in AndroidManifest.xml in React Native
React Native Unexpected Reserved Word ‘await’ Error Solution
