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 Add Sticky Header to ListView Android iOS Example
Wish You All a Very Very Happy New Year 2018
React Native Confetti Cannon Gift Screen Android iOS Example
Execution failed for task processDebugResources Android Error React Native
Get Current Date With Month And Year in React Native Android iOS
