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 Open Navigate to Another Activity on Button Click
Getting Started with YARN Installation Guide For Windows
How to Use State Inside React Native App Full Explained Example Tutorial
React Native Integrate YouTube Video in Android iOS App Example
Example of React Native Countdown Component Timer
