1

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Tekeste Kidanu
  • 1,950
  • 2
  • 14
  • 22

2 Answers2

1

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.

Tekeste Kidanu
  • 1,950
  • 2
  • 14
  • 22
0

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
},
.
.
.
kwishnu
  • 1,730
  • 19
  • 17
  • Thank you, I have considered this one and I would use it as a last resort if there is no way of doing is with flexbox only. – Tekeste Kidanu Nov 06 '17 at 22:55