React Native - flex, ScrollView and dynamic height not filling screen

Question

I have a dynamic height inside ScrollView - on user interaction the height can either increase or decrease. ScrollView has flexGrow:1 and the contents inside are wrapped around a View with flex: 1.

However, when decreasing the height while being on the bottom of the panel, I get a white 'overscroll-like space' on the bottom which I can remove only by dragging the panel back up.(p.s I have bounces={false} overScrollMode='never')

How can remove that overscroll space when screen has decreased its height.

P.S. I do not want to forceUpdate since there are contents I do not wish to be lost/updated.

Answer 1

I think, you have to adjust contentInset prop of ScrollView when you expand(increase height) and collpase(decrease height) your contents.

...
<ScrollView
    automaticallyAdjustContentInsets={false}
    contentInset={{top:0, bottom: this.state.contentInsetBottom }}
 >
...

You can have some predefined values something like,

const bottom_initial = 0;
const arbitrary_move_value = 100;

In you state,

this.state={
  contentInsetBottom: bottom_initial
}

When you expand or collapse, calculate appropriate move value and change the contentInset.

this.setState({
  contentInsetBottom: arbitrary_move_value
})

This is just the idea. You have to calculate appropriate contentInset. Hope this helps.