Skip to content
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
Closed

Styles with percentage values #364

fnky opened this issue Mar 27, 2015 · 17 comments

Comments

@fnky
Copy link

@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
Copy link

@joshaber 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
Copy link
Author

@fnky 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
Copy link

@lucamezzalira lucamezzalira commented Mar 27, 2015

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

@despairblue
Copy link
Contributor

@despairblue despairblue commented Mar 29, 2015

Also this won't work for images.

@roman01la
Copy link

@roman01la roman01la commented Apr 10, 2015

+1

@a-botermans
Copy link

@a-botermans a-botermans commented Apr 13, 2015

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

@ide
Copy link
Contributor

@ide 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
Copy link
Collaborator

@brentvatne 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
Copy link

@tommcgurl tommcgurl commented May 31, 2015

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

@brentvatne
Copy link
Collaborator

@brentvatne 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
Copy link

@tommcgurl tommcgurl commented Jun 1, 2015

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

@vitalets
Copy link

@vitalets 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
Copy link

@note89 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
Copy link

@andrioid 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
Copy link
Author

@fnky fnky commented Dec 18, 2017

@andrioid Yeah, it was introduced in 3f49e74

@Jun711
Copy link

@Jun711 Jun711 commented Dec 29, 2017

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

@sgskylark
Copy link

@sgskylark 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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet