Filling the remaining space in a React Native ScrollView

How to reproduce Android’s fillViewport=true in React Native’s ScrollView.

Photo by Shahadat Rahman on Unsplash

You’re developing a React Native app. You stumble upon a screen that has some input fields and a submit button at the bottom of the screen. You want to fill the space between the input fields and the button. Adding some space between the fields and the button is not an option, since smaller displays will be scrollable, while a large display will fit the whole content. How do you accomplish this?

Couldn’t be easier! This is the second situation where contentContainerStyle saves the day! (Curious about the other one?)

The first thing you’ll need to do is to add {flexGrow: 1} as the style for the aforementioned prop.

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    {renderSomeComponent()}
    {renderSecondComponent()}
    <CustomButton
        title={t(‘save’)}
        onPress={onSaveFilePressed}
    />
</ScrollView>

But something is still missing.

<View style={{flex: 1}}/>

Adding an empty view between your components and your button (or whatever you want at the bottom of your screen, I’m not judging) will indeed fill the space between them and stretch the ScrollView on the entire screen.

React native, children of ScrollView wont fill full height