how to create circle shape in react native with flex box

Question

this is my component:

const styles = {
 menuContainer: {
  flex: 1,
  flexDirection: 'column'  
 },
 menuItem: {
  flex: 1,
  borderRadius: ??
 }
}
        <View style={styles.menuContainer}>
            <TouchableOpacity {styles.menuItem}/>                    
            <TouchableOpacity {styles.menuItem}/> 
        </View>

bordeRadius in react native doesn't work with percentage like 50% and in flex box i don't know the width of each flexItem. do you have any idea without calculate width of each flexItem?

Answer 1

Bad news, If you don't know the container's dimensions ahead of time, then I think you're only option is to use onLayout to calculate each flex container's dimensions.

{nativeEvent: { layout: {x, y, width, height}}}

If you can declare a fixed width & height, then it's easy, but sounds like this isn't going to be news to you.

circle: {
    width: 100,
    height: 100,
    borderRadius: 100/2
}

There's a feature request submitted on this feature already. Show your support by up-voting it here...

https://react-native.canny.io/feature-requests/p/borderradius-percentages

Sorry!