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?

Longlongan

@LGSon thanks for response but in react-native, border-radius doesn't work with percentage.. – Longlongan

@LGSon border-radius just give number in react-native, no percent – Longlongan

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!

Dichloride

thanks chris but i don't have width and height, as i say i use flex pattern, so you mean if i don't know the container dimensions, i cant create a circle? the problem is calculate a dimensions has a overload :-( – Longlongan

I'm sorry, but I believe your only option is to calculate onLayout. Would be nice to be able to define radius as percentage. You should upvote the feature request react-native.canny.io/feature-requests/p/… – Dichloride

Answer 2

I think that we cannot give border-radius to the flex so we can use width and height by getting device Dimensions and give the border-radius to the view.

Phylloquinone