Response-native: borderRadius doesn't snap component right

Question

The borderRadius style borderRadius does not change the border of the component correctly.

I expect to see a green circle on a red background without any space. Instead, I see it.

 class Healthie extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.button} /> </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' } }); 

reaction-native version: 0.17.0.

Answer 1

To get what you are looking for, you will have to wrap the text box inside another view. Changing borderRadius in the view will not use a different BG color:

 <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.

Answer 2

no need to wrap a button or text inside the views, just put it in your style

 overflow: hidden 

he works for me