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?

@LGSon thanks for response but in react-native, border-radius doesn't work with percentage.. — hossein derakhshan, Oct 28 '17 at 08:50
@LGSon border-radius just give number in react-native, no percent — hossein derakhshan, Oct 28 '17 at 09:10

Chris Geirman · Accepted Answer · 2017-10-28T13:16:48.530

11

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!

edited Oct 28 '17 at 13:16

answered Oct 25 '17 at 18:59

Chris Geirman

9,474
5
37
70

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 :-( – hossein derakhshan Oct 28 '17 at 09:19
1

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 https://react-native.canny.io/feature-requests/p/borderradius-percentages – Chris Geirman Oct 28 '17 at 13:13

score 0 · Answer 2 · edited Jun 24 '19 at 15:01

0

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.

edited Jun 24 '19 at 15:01

Joykal Infotech

1,840
3
9
17

answered Jun 24 '19 at 13:54

ravi

370
4
11

how to create circle shape in react native with flex box

2 Answers2