76

I can give the height element of style numeric values such as 40 but these are required to be integers. How can I make my component to have a height of 100%?

11 Answers 11

81

check out the flexbox doc. in the stylesheet, use:

flex:1,
5
  • 5
    This actually sets both height and width to 100%. Set only height?
    – fatuhoku
    Jul 10, 2015 at 14:49
  • have you set flex-direction?
    – wangii
    Jul 10, 2015 at 17:59
  • 1
    Sorry — I don't know what exactly I've changed but it appears to be working as I want it now. I was using the flex option to grow the element.
    – fatuhoku
    Jul 10, 2015 at 18:41
  • Problem is this also centers elements inside that would otherwise be positioned to the top of the screen...
    – Some Guy
    Aug 11, 2015 at 21:12
  • This solution works for mobile devices, but does not work on the web. Please see my solution here
    – Willster
    Jun 16, 2022 at 13:19
62

Grab the window height into a variable, then assign it as the height of the flex container you want to target :

let ScreenHeight = Dimensions.get("window").height;

In your styles :

var Styles = StyleSheet.create({ ... height: ScreenHeight });

Note that you have to import Dimensions before using it:

import { ... Dimensions } from 'react-native'
2
  • height: "100vh" generate critical error in react-native that's why use Dimensions.get("window").height
    – zloctb
    Aug 29, 2020 at 7:26
  • Tracking the window height via the Dimensions API is a bit cumbersome, and actually sometimes inaccurate on some mobile devices. I have a solution that can work across mobile and web, that makes use of '100vh' see here
    – Willster
    Jun 16, 2022 at 13:21
55

flex:1 should work for almost any case. However, remember that for ScrollView, it's contentContainerStyle that controls the height of view:

WRONG

const styles = StyleSheet.create({
  outer: {
    flex: 1,
  },
  inner: {
    flex: 1
  }
});

<ScrollView style={styles.outer}>
  <View style={styles.inner}>
  </View>
</ScrollView>

CORRECT

const styles = StyleSheet.create({
  outer: {
    flex: 1,
  },
  inner: {
    flex: 1
  }
});

<ScrollView contentContainerStyle={styles.outer}>
  <View style={styles.inner}>
  </View>
</ScrollView>

2
  • 4
    I was unaware of contentContainerStyle. This fixed the issue for me :-)
    – oldo.nicho
    Aug 23, 2021 at 20:47
  • Should this work with react-native-web ? Like I'm developing it with Web interface, with NextJS, but Styles conversion are not 100% same, I have to separate some. But I don't know in this case.
    – KeitelDOG
    Apr 28, 2022 at 20:28
36

You can simply add height: '100%' into your item's stylesheet. it works for me

10
  • what version your project is running? I'm using 49.3 and it still works well
    – Umino San
    Dec 1, 2017 at 16:03
  • 3
    Not sure why this is being down-voted. Works perfectly on my machine (tm)
    – Andrioid
    Dec 5, 2017 at 10:34
  • 5
    @Southerneer The answer isn't wrong. This works, and I work with RN on a daily basis using both iOS and Android. Look at this snippet from the RN repo, for example: github.com/facebook/react-native/blob/… It uses height and width in percentages. I can't say why this isn't documented, but it works. I use flex as much as possible, but flex and Dimensions isn't always applicable when you want relative size.
    – Andrioid
    Dec 15, 2017 at 9:24
  • 1
    This was added here, and is tagged as 0.51: github.com/facebook/react-native/commit/… So, with November release of React Native, this is supported.
    – Andrioid
    Dec 18, 2017 at 12:02
  • 1
    Updated documentation: facebook.github.io/react-native/docs/layout-props.html#width
    – Andrioid
    Jan 26, 2018 at 9:41
8

most of the time should be using flexGrow: 1 or flex: 1

or you can use

import { Dimensions } from 'react-native';
const { Height } = Dimensions.get('window');

styleSheet({
  classA: {
    height: Height - 40,
  },
});

if none of them work for you try it:

container: {
  position: 'absolute',
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
}
1
  • 1
    You have error here: const { Height } = Dimensions.get('window'), use height (small letter) to extract data Jul 19, 2020 at 14:36
4

Try this:

  <View style={{flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'skyblue'}} />
  </View>

You can have more help in react-native online documentation (https://facebook.github.io/react-native/docs/height-and-width).

4

I was using a ScrollView, so none of these solutions solved my problem. Until I tried contentContainerStyle={{flexGrow: 1}} prop on my scrollview. Seems like without it -scrollviews will just always be as tall as their content.

My solution was found here: React native, children of ScrollView wont fill full height

1

None of the solutions worked for me. What I did was this:

<SafeAreaView style={{height: '100%'}} >
        <ScrollView style={{height: '100%'}}>
                <View style={{height: '100%'}}>
                // your content here
0
<View style={styles.container}> 
</View>
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})
0

I looked at lots of these solutions, and none worked across React Native mobile and web.

Tracking the screen height using Dimensions API is one way that does work, but this can be innacurate on some mobile devices. The best solution I found was to use this on your element:

    <View style={{ height:Platform.OS === 'web' ? '100vh' : '100%' }}
       /* ... your application */
    </View>

Please also note the caveat with ScrollView as mentioned here.

0

I would say

<View
    style={{
      ...StyleSheet.absoluteFillObject,
    }}></View>

In this way, you can fill the entire screen without caring about, flex, width, or height

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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