My concern lies with a ScrollView that is not occupying the full remaining height, as shown here.
The red-bordered view should extend all the way down, but it fails to adjust properly when the keyboard is visible like in the case of selecting the 5th item.
This is the code for the component in question :
<Container>
<Header navigation={this.props.navigation} title="Header" />
<ScrollView style={{
flexGrow: 1,
borderColor: '#F00',
borderWidth: 1,
}}>
<KeyboardAvoidingView behaviour="padding" keyboardVerticalOffset={50} style={{
flex: 1,
}}>
<InputWithLabel label="1st item" editable={true} onTextChange={this.textChange} />
<InputWithLabel label="2nd item" editable={true} onTextChange={this.textChange} />
<InputWithLabel label="3rd item" editable={true} onTextChange={this.textChange} />
<InputWithLabel label="4th item" editable={true} onTextChange={this.textChange} />
<InputWithLabel label="5th item" editable={true} onTextChange={this.textChange} />
</KeyboardAvoidingView>
</ScrollView>
</Container>
Additionally, this is my root component where I make use of react-navigation to render components :
<Root>
<StatusBar translucent={false} barStyle="light-content" />
<Provider store={store}>
<AppRoot/>
</Provider>
</Root>
I have tried adjusting the keyboardVerticalOffset parameter and also switching from "flexGrow: 1" to "flex: 1" in the scrollview, but the issue still persists.
What could be causing this problem?