Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 222
EDJ Avatar asked Feb 24 '18 13:02

EDJ


People also ask

How do I get ScrollView height in react native?

Get the height of the contents within the ScrollView ("contentHeight") Use the ScrollView's "onScroll" event to get the scroll offset. Use it to update the scrollOffset animation. Create a ScrollBar component based on the scrollOffset animation value, containerHeight, and contentHeight.

Can scroll in ScrollView react native?

Using ScrollView ScrollViews can be configured to allow paging through views using swiping gestures by using the pagingEnabled props. Swiping horizontally between views can also be implemented on Android using the ViewPager component. On iOS a ScrollView with a single item can be used to allow the user to zoom content.


Video Answer


1 Answers

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.

like image 124
Dev Avatar answered Oct 19 '22 19:10

Dev