100 width in React Native Flexbox

Question

I have already read several flexbox tutorial  but I still cannot make this simple task to work   How can I make the red box to 100  width     Code      lt View style  styles container  gt       lt Text style  styles welcome  gt        Welcome to React Natives      lt  Text gt       lt Text style  styles line1  gt        line1      lt  Text gt       lt Text style  styles instructions  gt        Press Cmd R to reload    n         Cmd D or shake for dev menu      lt  Text gt     lt  View gt    style   container      flex  1    justifyContent   center     alignItems   center     backgroundColor    F5FCFF     borderWidth  1    flexDirection   column      welcome      fontSize  20    textAlign   center     margin  10    borderWidth  1     line1        backgroundColor    FDD7E4      instructions      textAlign   center     color    333333     marginBottom  5    borderWidth  1       Thank you   Update 1  Suggestion by Nishanth Shankar  adding  flex 1 for the wrapper   flexDirection   row   Output     Code      lt View style  styles container  gt       lt View style   flex 1   gt         lt Text style  styles welcome  gt          Welcome to React Natives        lt  Text gt       lt  View gt       lt View style   flex 1   gt         lt Text style  styles line1  gt          line1        lt  Text gt       lt  View gt       lt View style   flex 1   gt         lt Text style  styles instructions  gt          Press Cmd R to reload    n           Cmd D or shake for dev menu        lt  Text gt       lt  View gt     lt  View gt     container        flex  1      justifyContent   center       alignItems   center       backgroundColor    F5FCFF       borderWidth  1      flexDirection   row       flexWrap   wrap          welcome        fontSize  20      textAlign   center       margin  10      borderWidth  1         line1          backgroundColor    FDD7E4          instructions        textAlign   center       color    333333       marginBottom  5      borderWidth  1

User · Answer

Editted   In order to flex only the center text  a different approach can be taken - Unflex the other views    Let flexDirection remain at  column  remove the alignItems    center  from container add alignSelf  center  to the textviews that you don t want to flex   You can wrap the Text component in a View component and give the View a flex of 1    The flex will give     100  width if the flexDirection  row  in styles container  100  height if the flexDirection  column  in styles container

User · Answer

Use javascript to get the width and height and add them in View s style  To get full width and height  use Dimensions get  window   width https   facebook github io react-native docs dimensions html  getSize         return           width  Dimensions get  window   width           height  Dimensions get  window   height           and then    lt View style   styles overlay  this getSize     gt

User · Answer

Style    width    100       try this   StyleSheet generated       width    80       textAlign    center      marginTop   21 8625     fontWeight    bold      fontSize   16     color    rgb 24  24  24       fontFamily    Trajan Pro      textShadowColor    rgba 255  255  255  0 2       textShadowOffset          width   0       height   0 5

User · Answer

width   100   and alignSelf   stretch  didn t work for me  Dimensions didn t suite my task cause I needed to operate on a deeply nested view  Here s what worked for me  if I rewrite your code  I just added some more Views and used flex properties to achieve the needed layout          a column        lt View style  styles container  gt          some rows here          lt Text style  styles welcome  gt        Welcome to React Natives      lt  Text gt          this row should take all available width          lt View style    flexDirection   row     gt            flex 1 makes the view take all available width            lt View style    flex  1    gt           lt Text style  styles line1  gt            line1          lt  Text gt         lt  View gt            I also had a button here  to the right of the text          lt  View gt          the rest of the rows          lt Text style  styles instructions  gt        Press Cmd R to reload    n         Cmd D or shake for dev menu      lt  Text gt     lt  View gt

User · Answer

Here you go   Just change the line1 style as per below   line1        backgroundColor    FDD7E4       width  100        alignSelf  center

User · Answer

First add Dimension component   import   AppRegistry  Text  View Dimensions   from  react-native     Second define Variables   var height   Dimensions get  window   height  var width   Dimensions get  window   width    Third put it in your stylesheet   textOutputView        flexDirection  row       paddingTop 20      borderWidth 1      borderColor  red       height height 0 25      backgroundColor  darkgrey       justifyContent  flex-end      Actually in this example I wanted to make responsive view and wanted to view only 0 25 of the screen view so I multiplied it with 0 25  if you wanted 100  of the screen don t multiply it with any thing like this   textOutputView        flexDirection  row       paddingTop 20      borderWidth 1      borderColor  red       height height      backgroundColor  darkgrey       justifyContent  flex-end

User · Answer

Simply add alignSelf   stretch  to your item s stylesheet   line1        backgroundColor    FDD7E4       alignSelf   stretch       textAlign   center

User · Answer

You should use Dimensions  First  define Dimensions   import   Dimensions   from  react-native    var width   Dimensions get  window   width    full width var height   Dimensions get  window   height    full height   then  change line1 style like below   line1        backgroundColor    FDD7E4       width  width

User · Answer

Noted  Try to fully understanding about flex concept            lt View style              flex  2            justifyContent   center             alignItems   center             gt             lt View style                   flex  1                alignItems   center                 height  50                 borderWidth  1                 borderColor    000                gt                  lt Text gt Welcome to React Nativ lt  Text gt              lt  View gt              lt View style                  flex  1                alignItems   center                borderWidth  1                 borderColor   red                   height  50                             gt                 lt Text gt  line 1  lt  Text gt               lt  View gt             lt View style                flex  1              alignItems   center               height  50               borderWidth  1                                   borderColor    000               gt                lt Text gt                Press Cmd R to reload    n                 Cmd D or shake for dev menu               lt  Text gt              lt  View gt          lt  View gt

User · Answer

just remove the alignItems   center  in the container styles and add textAlign   center  to the line1 style like given below    It will work well  container      flex  1    justifyContent   center     backgroundColor    F5FCFF     borderWidth  1     line1        backgroundColor    FDD7E4       textAlign  center

[flexbox] 100% width in React Native Flexbox

Examples related to flexbox

Examples related to react-native