How to create a circle button in React Native
HOW TO CREATE A CIRCLE BUTTON IN REACT NATIVE
In this React Native source code example, the source code below illustrate how to create a circle button in React Native.
You can copy and adopt this source code example to your React Native project without reinventing the wheels.
import React, {Component} from 'react';
import {StyleSheet, Text, View,TouchableOpacity} from 'react-native';
export default class App extends Component{
render() {
return (
<View style={styles.container}>
<View style={styles.myButton}>
<Text>Circle Button</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
myButton:{
padding: 5,
height: 200,
width: 200, //The Width must be the same as the height
borderRadius:400, //Then Make the Border Radius twice the size of width or Height
backgroundColor:'rgb(195, 125, 198)',
}
});
If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.