react-native: borderRadius does not frame component right
no need to wrap button or text inside views, just put this on your style
overflow: hiddenit works for me
To get what you're looking for, you're going to have to wrap the Text box inside another View. The View will not default to another BG color when the borderRadius is changed:
<View style={styles.container}> <View style={styles.button}> <Text style={{ backgroundColor: 'transparent' }}>Text</Text> </View></View>const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red', }, button: { backgroundColor: 'green', borderRadius: 50, width: 100, height: 100, textAlign: 'center', flexDirection:'row', alignItems:'center', justifyContent:'center' }});Check out this demo.