CODEWITHSUNDEEP
cssreact-nativeflexboxreact-native-flexbox
Tekeste Kidanu
Tekeste Kidanu

Reputation: 1990

Flexbox: set child width to 80% while flex-direction is set to column on the parent

I am working on a React Native project. The container's flexDirection is set to column and I want the child's width to span 80% of the parent. If the parent's flexDirection was set to row I would have set the flex value to 0.8 and be done with it. The restrictions are

  1. I can't have an additional container around the child.
  2. I can't give the child a fixed width in pixels.

Here is a playground to fiddle with the problem.

Upvotes: 2

Views: 2628

Answers (2)

Tekeste Kidanu
Tekeste Kidanu

Reputation: 1990

I recently learned that after ReactNative version 0.42 there is support for percentage units not just only for width but also the following properties:

  • padding
  • margin
  • width
  • height
  • minWidth
  • minHeight
  • maxWidth
  • maxHeight
  • flexBasis

If you want to learn more here is a link to the actual commit that added this awesome functionality.

The answer to my question would be to just add a percentage width of 80% Here it is my original fiddle with the fix added.

Upvotes: 1

kwishnu
kwishnu

Reputation: 1861

You can access screen dimensions with:

const {width, height} = require('Dimensions').get('window');

at your top level imports; then, in your style use:

child: {
   width: width*0.8
},
.
.
.

Upvotes: 0

Related Questions