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?
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!