Styles with percentage values

[fnky]

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.

[joshaber]

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>
)

[fnky]

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.

[lucamezzalira]

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

[despairblue]

Also this won't work for images.

[roman01la]

+1

[a-botermans]

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

[ide]

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

[brentvatne]

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

[tommcgurl]

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

[brentvatne]

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

[tommcgurl]

Thanks @brentvatne, I'll definitely check that out 👍

[vitalets]

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.

[note89]

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

[andrioid]

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?

[fnky]

@andrioid Yeah, it was introduced in 3f49e74

[Jun711]

Percentage value is not supported for transform yet, I guess.
transform

[sgskylark]

How to add condition landscape in hide some section. using react-native.