how to make a View into a circle in react native code example
Example 1: circle in react native
your border radius should be a half of width and your height. like below:
circle: {
width: 44,
height: 44,
borderRadius: 44/2
}
Example 2: react-native curved view
import React from 'react';
import {View, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
parent : {
height : '80%',
width : '100%',
transform : [ { scaleX : 2 } ],
borderBottomStartRadius : 200,
borderBottomEndRadius : 200,
overflow : 'hidden',
},
child : {
flex : 1,
transform : [ { scaleX : 0.5 } ],
backgroundColor : 'yellow',
alignItems : 'center',
justifyContent : 'center'
}
});
const MyCurvedView = () => {
return (
<View style={styles.parent}>
<View style={styles.child}>
</View>
</View>
);
}
export default MyCurvedView;