ScrollView in ReactNative not filling remaining space

Question

I have a screen in my app that has a "in between" content. This content is too long for the Iphone 5-8, but just one screen for the Iphone 8S-XS Max.

To fix it, I've put on a simple ScrollView, which works for the content that is too long, but for the larger screen sizes, it leaves a gray background like shown in the screenshot below:

Here is the code:

<View style={{flex: 1, width: '100%',justifyContent: 'center', alignItems: 'center', height: 900,}}>
    <ScrollView style={{width: '100%', flex: 1, height: 900}}>
        <ImageBackground source={require('../../assets/images/background.png')} style={{width: '100%', flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: 'background-color: rgba(0, 0, 0, 0.5)',}}>
            {/*...Unimportant view code...*/}
        </ImageBackground>
    </ScrollView>
</View>

As you can see, I've applied flex: 1 to all of the important containers, and I've tried putting a bounded height (e.g. height: 900) on all of the above containers, to still no avail.

How can I make the content contained in the scrollview take up the whole screen height regardless of device?

Answer 1

So I actually found the answer in this medium article right here:
https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08 And the answer is, on your <ScrollView> component, assign the following property:

contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}

And it worked for me like a charm!

Answer 2

If you are using a SafeAreaView, mind the height of it and the edges attribute values.

If you have a navigation bar on this page, remove the 'top' from edges array.

<SafeAreaView edges={['top', 'left', 'right']} style={{ height: '100%' }}>
  {/* header */}
  <View style={{ height: 100 }}>
    <Text style={{ fontSize: 32, color: 'red' }}>
      Hi there I am a header
    </Text>
  </View>

  {/* the holly ScrollView */}
  <ScrollView style={{ borderWidth: 1, borderColor: 'deeppink' }}>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
    <Text style={{ fontSize: 32, borderWidth: 1, borderColor: 'yellow' }}>
      {' '}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ad
      architecto. Sunt ex dolore modi laborum voluptatibus recusandae
      reprehenderit quo dolores ipsam officia rerum nihil eaque eligendi,
      quae suscipit assumenda.{' '}
    </Text>
  </ScrollView>

  {/* footer */}
  <View style={{ height: 100 }}>
    <Text style={{ fontSize: 32, color: 'blue' }}>
      Hi there I am a footer
    </Text>
  </View>
</SafeAreaView>

Here is a working demo.

https://snack.expo.dev/@shrekuu/scrollview-filling-remaining-space