How to determine the width by percentage in the reaction of the native?

Question

I am trying to create a view with a frame around it that is centered and fills 80% of the screen. I came up with this:

<View style={{flexDirection: 'row'}}> <View style={{flex: .1}} /> <View style={{flex: .8, borderWidth: 2}} /> <View style={{flex: .1}} /> </View>

which works, but seems terribly detailed.

Is there a better (more concise) way to create a view that is a certain percentage of the width of the screen and is centered on the page?

+5

Abe miessler Jul 23 '16 at 9:38

1 answer

Cherniv · Accepted Answer · 2016-07-23T22:44:22+0000

UPDATE:

Starting with React Native version 0.42, we now have full percentage support for width , height , padding , etc., see the full list and examples here: https://github.com/facebook/react-native/commit / 3f49e743bea730907066677c7cbfbb1260677d11

Old method:

Consider using Dimensions , for example:

 import Dimensions from 'Dimensions';

and then in the style of the element:

 width: Dimensions.get('window').width / 100 * 80,