New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styles with percentage values #364

Closed
fnky opened this Issue Mar 27, 2015 · 17 comments

Comments

Projects
None yet
@fnky

fnky commented Mar 27, 2015

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

This comment has been minimized.

joshaber commented Mar 27, 2015

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

This comment has been minimized.

fnky commented Mar 27, 2015

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

This comment has been minimized.

lucamezzalira commented Mar 27, 2015

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

@despairblue

This comment has been minimized.

Contributor

despairblue commented Mar 29, 2015

Also this won't work for images.

@roman01la

This comment has been minimized.

roman01la commented Apr 10, 2015

+1

@a-botermans

This comment has been minimized.

a-botermans commented Apr 13, 2015

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

@ide

This comment has been minimized.

Collaborator

ide commented Apr 13, 2015

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

@brentvatne

This comment has been minimized.

Collaborator

brentvatne commented Apr 13, 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 brentvatne closed this May 29, 2015

@tommcgurl

This comment has been minimized.

tommcgurl commented May 31, 2015

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

@brentvatne

This comment has been minimized.

Collaborator

brentvatne commented May 31, 2015

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

@tommcgurl

This comment has been minimized.

tommcgurl commented Jun 1, 2015

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

@vitalets

This comment has been minimized.

vitalets commented Apr 29, 2016

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

This comment has been minimized.

note89 commented Oct 14, 2016

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

This comment has been minimized.

andrioid commented Dec 15, 2017

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

This comment has been minimized.

fnky commented Dec 18, 2017

@andrioid Yeah, it was introduced in 3f49e74

@Jun711

This comment has been minimized.

Jun711 commented Dec 29, 2017

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

@sgskylark

This comment has been minimized.

sgskylark commented May 9, 2018

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

@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.