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:

  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    <Text style={styles.line1}>
      line1
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>

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:

  <View style={styles.container}>
    <View style={{flex:1}}>
      <Text style={styles.welcome}>
        Welcome to React Natives
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.line1}>
        line1
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>
    </View>
  </View>

  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,
  },

David Schumann · Accepted Answer · 2018-04-04 05:53:26Z

534

Simply add alignSelf: "stretch" to your item's stylesheet.

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},

edited Apr 4, 2018 at 5:53

David Schumann

14.3k12 gold badges80 silver badges101 bronze badges

answered Oct 23, 2015 at 15:13

Corentin S.

5,9202 gold badges18 silver badges21 bronze badges

2

Using alignSelf stretch, I had an issue with Android - I had an Image with 'absolute' position and in this case, even using 'stretch', such box gets padded to the edge of the elements contained within. Dimensions.get('window').width worked both on iOS and Android in my case.
– st_bk
Commented Dec 24, 2017 at 15:40
This one way solved all of my 'full width' problems, check it out: snack.expo.io/S1PWQqkcZ
– webdevinci
Commented May 19, 2018 at 20:59
3

It seems like width: "100%" should also work but it doesn't. I think I don't understand when alignSelf: "stretch" works vs width: "100%". @Corentin any ideas? Thx!
– Joel
Commented Sep 26, 2018 at 4:06
6

@st_bk was a life saver there! However, I found a better solution for the event that you're absolutely positioning and need to stretch: position: absolute, top: 0, bottom: 0, left: 0, right: 0
– lance.dolan
Commented Nov 7, 2018 at 19:34
to @lance.dolan point - you really only need the left and right params if you are looking for width 100%. Also i am not 100% on this, but for the alignStretch rule to work you have to have set flexDirection: 'row', because it is set as column by default.
– virtualLast
Commented May 8, 2019 at 9:57

| Show 2 more comments

Nabeel K · Accepted Answer · 2018-08-02 11:14:47Z

148

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,
},

edited Aug 2, 2018 at 11:14

Nabeel K

6,08811 gold badges39 silver badges69 bronze badges

answered Oct 23, 2015 at 22:53

Melih Mucuk

7,0366 gold badges38 silver badges56 bronze badges

4

thx Melih Mucuk! alignSelf: "stretch" suggested by Corentin S. is the easiest and simple so I accepted that answer. However, having Dimensions leads me to a new way to play around the layout. In some cases, we could adjust the items programmatically, thank you!
– franfran
Commented Oct 26, 2015 at 3:47
1

@Melih I find the width returned is wrong on my Android device. The right width should be 720px, but 360px returns.
– peacepassion
Commented Jan 23, 2016 at 11:39
4

@peacepassion, you got 360, because your device dpi is scaled 2x. Try Dimensions.get('window').scale - this should return 2 in your case.
– matusalem
Commented Mar 7, 2016 at 16:28
Thanks for your answer, I am dealing with a container with a background and your suggestion fits perfectly.
– clarenswd
Commented Mar 22, 2016 at 11:59
14

This will not work when the device is rotated. It's better to use adaptive layout.
– laynemoseley
Commented Dec 21, 2016 at 18:14

| Show 4 more comments

Nishanth Shankar · Accepted Answer · 2015-10-23 09:36:36Z

32

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

edited Oct 23, 2015 at 9:36

answered Oct 23, 2015 at 8:38

Nishanth Shankar

1,9761 gold badge15 silver badges19 bronze badges

yes, I tried to set flexDirection:'row' and flex: 1 so that the width go to 100%. However, the components are all inline and cannot go to the next line. even I used flexWrap: 'wrap'
– franfran
Commented Oct 23, 2015 at 9:02
any luck with the new method franfran?
– Nishanth Shankar
Commented Oct 24, 2015 at 18:45
the alignSelf: 'stretch' suggested by Corentin S. works.
– franfran
Commented Oct 26, 2015 at 3:45

Add a comment |

ravibagul91 · Accepted Answer · 2019-09-15 04:26:02Z

18

Here you go:

Just change the line1 style as per below:

line1: {
    backgroundColor: '#FDD7E4',
    width:'100%',
    alignSelf:'center'
}

edited Sep 15, 2019 at 4:26

ravibagul91

20.6k6 gold badges37 silver badges61 bronze badges

answered Aug 2, 2018 at 9:25

iDevAmit

1,5782 gold badges21 silver badges35 bronze badges

4

I am very happy this worked! I don't know why, I assumed percentage values weren't working in RN....
– p-syche
Commented Nov 24, 2020 at 11:09

Add a comment |

David Schumann · Accepted Answer · 2018-04-04 00:57:38Z

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'
}

David Schumann · Accepted Answer · 2018-04-04 02:56:10Z

6

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,

<View style={[styles.overlay, this.getSize()]}>

edited Apr 4, 2018 at 2:56

David Schumann

14.3k12 gold badges80 silver badges101 bronze badges

answered Mar 31, 2017 at 12:01

Sean Chen

2493 silver badges3 bronze badges

Ooh, I like this. Possibly not the best solution but it did solve my problem. Not to mention that it's a pretty neat function in general.
– Kevin Østerkilde
Commented Jun 17, 2017 at 21:26

Add a comment |

Sasha Davydenko · Accepted Answer · 2021-08-18 10:15:58Z

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 */}
  <View style={styles.container}>
    {/* some rows here */}
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    {/* this row should take all available width */}
    <View style={{ flexDirection: 'row' }}>
      {/* flex 1 makes the view take all available width */}
      <View style={{ flex: 1 }}>
        <Text style={styles.line1}>
          line1
        </Text>
      </View>
      {/* I also had a button here, to the right of the text */}
    </View>
    {/* the rest of the rows */}
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>

Android · Accepted Answer · 2019-06-21 14:28:05Z

3

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'
},

edited Jun 21, 2019 at 14:28

Android

1,4264 gold badges15 silver badges23 bronze badges

answered Jun 21, 2019 at 12:15

ravi

3705 silver badges11 bronze badges

Add a comment |

Chaurasia · Accepted Answer · 2019-11-08 12:42:37Z

3

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

edited Nov 8, 2019 at 12:42

answered Jul 6, 2019 at 23:58

Chaurasia

4961 gold badge7 silver badges22 bronze badges

Please provide a proper answer to the question. Do not provide a link without first explaining here what it is about.
– Akaisteph7
Commented Jul 7, 2019 at 0:50

Add a comment |

David Schumann · Accepted Answer · 2018-04-04 00:45:00Z

Noted: Try to fully understanding about flex concept.

       <View style={{
          flex: 2,
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <View style ={{
              flex: 1,
              alignItems: 'center, 
              height: 50, 
              borderWidth: 1, 
              borderColor: '#000' 
          }}>
               <Text>Welcome to React Nativ</Text>
           </View>
           <View style={{
              flex: 1,
              alignItems: 'center,
              borderWidth: 1, 
              borderColor: 'red ', 
              height: 50
            }}
            >
              <Text> line 1 </Text>
            </View>
          <View style={{
            flex: 1,
            alignItems: 'center, 
            height: 50, 
            borderWidth: 1,                     
            borderColor: '#000'
          }}>
             <Text>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
             </Text>
           </View>
       </View>

Syscall · Accepted Answer · 2021-03-31 07:03:21Z

1

Simply use width:'100%'

line1: {
      backgroundColor: '#FDD7E4',
width: '100%'
  },

edited Mar 31, 2021 at 7:03

Syscall

19.7k10 gold badges42 silver badges55 bronze badges

answered Mar 31, 2021 at 6:33

Antier Solutions

1,3828 silver badges10 bronze badges

Add a comment |

Shadman Fatin · Accepted Answer · 2024-05-22 13:45:10Z

0

My one was not working with width 100%. I added flex: 1 to the child component. It worked immediately. You can give it a try, it might work for your case too.

answered May 22 at 13:45

Shadman Fatin

1328 bronze badges

Add a comment |

Collectives™ on Stack Overflow

100% width in React Native Flexbox

12 Answers 12

Your Answer

Not the answer you're looking for? Browse other questions tagged
flexbox
react-native
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged flexboxreact-native or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
flexbox
react-native
or ask your own question.