FlexBasis on React Native

Question

I have a Views with a flexBasis percentage value, but I can't be able to render this in React Native. According to documentation, the Flex-Basis property accept % values. How can I perform it into React? Thanks

<View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
    <View style={{flexGrow: 1, flexBasis:'0.5%', backgroundColor: 'rgba(129, 139, 196, 0.4)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'10%', backgroundColor: 'rgba(129, 139, 196, 0.5)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'50%', backgroundColor: 'rgba(129, 139, 196, 0.6)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'3%', backgroundColor: 'rgba(129, 139, 196, 0.7)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'2.5%', backgroundColor: 'rgba(129, 139, 196, 0.8)'}}></View>         
    <View style={{flexGrow: 1, flexBasis:'1.5%', backgroundColor: 'rgba(226, 7, 23, 0.5)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'2%', backgroundColor: 'rgba(226, 7, 23, 0.4)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'28.5%', backgroundColor: 'rgba(226, 7, 23, 0.3)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'0.5%', backgroundColor: 'rgba(226, 7, 23, 0.2)'}}></View>
    <View style={{flexGrow: 1, flexBasis:'1.5%', backgroundColor: 'rgba(226, 7, 23, 0.1)'}}></View>
</View>

Andrew · Accepted Answer · 2019-01-23 10:08:38Z

If you set flex value on the surrounding View you will be able to see it

<View style={{flexDirection: 'row', justifyContent: 'space-between', flex: 1}}>
  <View style={{flexGrow: 1, flexBasis:'0.5%', backgroundColor: 'rgba(129, 139, 196, 0.4)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'10%', backgroundColor: 'rgba(129, 139, 196, 0.5)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'50%', backgroundColor: 'rgba(129, 139, 196, 0.6)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'3%', backgroundColor: 'rgba(129, 139, 196, 0.7)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'2.5%', backgroundColor: 'rgba(129, 139, 196, 0.8)'}}></View>         
  <View style={{flexGrow: 1, flexBasis:'1.5%', backgroundColor: 'rgba(226, 7, 23, 0.5)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'2%', backgroundColor: 'rgba(226, 7, 23, 0.4)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'28.5%', backgroundColor: 'rgba(226, 7, 23, 0.3)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'0.5%', backgroundColor: 'rgba(226, 7, 23, 0.2)'}}></View>
  <View style={{flexGrow: 1, flexBasis:'1.5%', backgroundColor: 'rgba(226, 7, 23, 0.1)'}}></View>
</View>

Collectives™ on Stack Overflow

FlexBasis on React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related