Make view 80 width of parent in React Native

Question

I m creating a form in React Native and would like to make my TextInputs 80  of the screen width   With HTML and ordinary CSS  this would be straightforward   input       display  block      width  80       margin  auto      Except that React Native doesn t support the display property  percentage widths  or auto margins   So what should I do instead  There s some discussion of this problem in React Native s issue tracker  but the proposed solutions seem like nasty hacks

User · Answer

The easiest way to achieve is by applying width to view  width   80

User · Answer

Just add quotes around the size in your code  Using this you can use percentage in width  height input        width   80

User · Answer

The technique I use for having percentage width of the parent is adding an extra spacer view in combination with some flexbox  This will not apply to all scenarios but it can be very helpful   So here we go   class PercentageWidth extends Component       render             return                lt View style  styles container  gt                   lt View style  styles percentageWidthView  gt                          Some content                      lt  View gt                    lt View style  styles spacer                   lt  View gt               lt  View gt                      const styles   StyleSheet create       container            flexDirection   row              percentageWidthView            flex  60             spacer            flex  40             Basically the flex property is the width relative to the  total  flex of all items in the flex container  So if all items sum to 100 you have a percentage  In the example I could have used flex values 6  amp  4 for the same result  so it s even more FLEXible   If you want to center the percentage width view  add two spacers with half the width  So in the example it would be 2-6-2    Of course adding the extra views is not the nicest thing in the world  but in a real world app I can image the spacer will contain different content

User · Answer

If you are simply looking to make the input relative to the screen width  an easy way would be to use Dimensions      De structure Dimensions from React var React   require  react-native    var           Dimensions     React       Store width in variable var width   Dimensions get  window   width       Use width variable in style declaration  lt TextInput style    width  width    8      gt    I ve set up a working project here  Code is also below    https   rnplay org apps rqQPCQ   use strict    var React   require  react-native    var     AppRegistry    StyleSheet    Text    View    TextInput    Dimensions     React   var width   Dimensions get  window   width   var SampleApp   React createClass     render  function         return          lt View style  styles container  gt           lt Text style   fontSize 22   gt Percentage Width In React Native lt  Text gt           lt View style   marginTop 100  flexDirection   row  justifyContent   center    gt               lt TextInput style   backgroundColor    dddddd   height  60  width  width  8      gt             lt  View gt         lt  View gt                  var styles   StyleSheet create     container        flex  1      marginTop 100            AppRegistry registerComponent  SampleApp        gt  SampleApp

User · Answer

You can also try react-native-extended-stylesheet that supports percentage for single-orientation apps   import EStyleSheet from  react-native-extended-stylesheet    const styles   EStyleSheet create     column        width   80        height   50        marginLeft   10

User · Answer

That should fit your needs   var yourComponent   React createClass       render  function              return                lt View style   flex 1  flexDirection  column   justifyContent  center    gt                   lt View style   flexDirection  row    gt                       lt TextInput style   flex 0 8  borderWidth 1  height 20   gt  lt  TextInput gt                       lt View style   flex 0 2   gt  lt  View gt     spacer                  lt  View gt               lt  View gt

User · Answer

I have an updated solution  late 2019    to get 80  width of parent Responsively with Hooks it work s even if the device rotate   You can use Dimensions get  window   width to get Device Width in this example you can see how you can do it Responsively   import React    useEffect  useState   from  react   import   Dimensions   View   Text   StyleSheet    from  react-native    export default const AwesomeProject     gt       const  screenData  setScreenData    useState Dimensions get  window   width        useEffect      gt         const onChange        gt         setScreenData Dimensions get  window   width                Dimensions addEventListener  change   onChange         return      gt   Dimensions removeEventListener  change   onChange                 return                lt View style   styles container    width  screenData   0 8     gt                lt Text gt  I mAwesome  lt  Text gt              lt  View gt            const styles   StyleSheet create   container         flex  1       alignItems   center        justifyContent   center        backgroundColor    eee

User · Answer

As of React Native 0 42 height  and width  accept percentages     Use width  80  in your stylesheets and it just works    Screenshot   Live Example Child Width Height as Proportion of Parent  Code    import React from  react   import   Text  View  StyleSheet   from  react-native    const width proportion    80    const height proportion    40     const styles   StyleSheet create     screen        flex  1      alignItems   center       justifyContent   center       backgroundColor    5A9BD4          box        width  width proportion      height  height proportion      alignItems   center       justifyContent   center       backgroundColor    B8D2EC          text        fontSize  18            export default      gt       lt View style  styles screen  gt       lt View style  styles box  gt         lt Text style  styles text  gt           width proportion  of width   n            height proportion  of height        lt  Text gt       lt  View gt     lt  View gt

User · Answer

In your StyleSheet  simply put    width   80      instead of    width  80     Keep Coding

User · Answer

This is the way I got the solution  Simple and Sweet  Independent of Screen density   export default class AwesomeProject extends Component       constructor props           super props           this state    text              render         return           lt View           style                flex  1              backgroundColor    ececec               flexDirection   column               justifyContent   center               alignItems   center                        gt             lt View style    padding  10  flexDirection   row     gt               lt TextInput               style    flex  0 8  height  40  borderWidth  1                  onChangeText  text   gt  this setState   text                   placeholder  Text 1                value  this state text                gt             lt  View gt             lt View style    padding  10  flexDirection   row     gt               lt TextInput               style    flex  0 8  height  40  borderWidth  1                  onChangeText  text   gt  this setState   text                   placeholder  Text 2                value  this state text                gt             lt  View gt             lt View style    padding  10  flexDirection   row     gt               lt Button               onPress  onButtonPress                title  Press Me                accessibilityLabel  See an Information                gt             lt  View gt           lt  View gt

[javascript] Make view 80% width of parent in React Native

Examples related to javascript

Examples related to css

Examples related to reactjs

Examples related to react-native