React-native: Styles with percentage values

Created on 27 Mar 2015 · 17Comments · Source: facebook/react-native

When using a property with the type of number, it's not possible to use percentage-based values.

var styles = StyleSheet.create({
  myStyle: {
    position: 'absolute',
    width: '100%' // throws an error
  }
});

It would be nice to support this, so you don't have to calculate the value to px yourself. Using a string would also allow other units to be used — If using number type, it would still be px-based value.

This would also make it easy to make things responsive.

Locked

Source

fnky

Most helpful comment

Why not just write flex like this if you want %

flex:0.6 --> 60%
flex:0.4 --> 40% spacer

just add a empty view as the spacer and you'r of to the races

note89 on 14 Oct 2016

👍15

All 17 comments

flex can be used for this. For example:

// In render:
return (
  <View>
    // The width will be split evenly between the two views.
    <View style={{flex: 1}}/>
    <View style={{flex: 1}}/>
  </View>
)

// Or:
return (
  <View>
    // The second view will be double the width of the first.
    <View style={{flex: 0.5}}/>
    <View style={{flex: 1}}/>
  </View>
)

joshaber on 27 Mar 2015

👍9

It just seems weird to me to substitute width with flex for things like progressbars, sliders, etc.—this makes it not so trivial to reuse components on the web that uses percentage-based values for dynamic behaviors.

fnky on 27 Mar 2015

I agree with you, having percentage will help a lot on styling the components

lucamezzalira on 27 Mar 2015

Also this won't work for images.

despairblue on 29 Mar 2015

😄5

roman01la on 10 Apr 2015

+1 this would really make styling components so much easier.

a-botermans on 13 Apr 2015

Send a PR to https://github.com/facebook/css-layout, which is the layout engine that React Native uses.

ide on 13 Apr 2015

position: 'absolute',
left: 0,
right: 0,

This is a good way to get 100%. If you add top: 0, bottom: 0 also it will take up the entire screen

brentvatne on 13 Apr 2015

👍13

This would definitely be nice to have for images as @despairblue mentioned. +1

tommcgurl on 31 May 2015

Sounds reasonable @tommcgurl - check out facebook/css-layout and create an issue there, maybe someone will be up for implementing it :smile:

brentvatne on 31 May 2015

Thanks @brentvatne, I'll definitely check that out :+1:

tommcgurl on 1 Jun 2015

Until this is supported natively you can try https://github.com/vitalets/react-native-extended-stylesheet that supports percentage in styles for single orientation layout.

vitalets on 29 Apr 2016

👍1

Why not just write flex like this if you want %

flex:0.6 --> 60%
flex:0.4 --> 40% spacer

just add a empty view as the spacer and you'r of to the races

note89 on 14 Oct 2016

👍15

Has this been changed recently? I have working code, that uses '100%' in width and height. I also came across Yellobox.js in the RN repo that uses percentages (https://github.com/facebook/react-native/blob/9f33fe258312987f490cc0f3a71c0c4f93494e7f/Libraries/ReactNative/YellowBox.js). However, I can't find any mention of this in the documentation

Is this unintended or is the documentation lacking?