How to create round button with text or char inside. It should look like this: It should look like this, image below:
img example
So far I made this, but it's not so round:
import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Icon from 'react-native-vector-icons/FontAwesome'; // 4.4.2
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => null}>
<Icon
name="chevron-left"
icon={{ name: 'rss', type: 'font-awesome' }}
style={styles.button}
size={25}
/>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
button: {
padding: 25,
backgroundColor: 'black',
color: 'white',
borderRadius: 50,
},
});
<TouchableOpacity
style={{ borderWidth:1,
borderColor:'rgba(0,0,0,0.2)',
alignItems:'center',
justifyContent:'center',
width:100,
height:100,
backgroundColor:'#fff',
borderRadius:100,
}}
>
<Icon name={"chevron-right"}
size={30}
color="#01a699" />
</TouchableOpacity>
Create a button
that is square all the time, than add border-radius: 50;
I suggest you go with some min-width
/ width
or padding
on it. You don't need to add height
;
button {
background: red;
border: 0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
button::after {
content: "";
display: block;
padding-bottom: 100%;
}
<button>test</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With