ScrollView minHeight to take up all the space
I have a ScrollView which content doesn't necessarily exceeds it's size. Let's say it's a form where, upon errors, it expands to add error messages and then it exceeds the ScrollView size and thus is why I'm using that scroll.
The thing is that I want the content to always be at least of the same size of the ScrollView. I'm aware of the minHeight property, but the only way I found to use it is re-rendering, which I'd like to avoid.
I'm using redux for state management and this is what I have
Where the this.props.setScrollContentHeight triggers an action which enters the height on the state, and this.props.scrollHeight is said height. So that after the first render where the onLayout function is triggered, the state is updated with the ScrollView's height, which I then assign as minHeight to its content.
If I set the content's style to flex: 1 then the ScrollView won't scroll.
Can you think of a way to avoid that second render for performance purposes?
Thank you!
Answer
You should use flexGrow: 1 for the ScrollView and flex: 1 inside the ScrollView, to get a ScrollAble but at least as big as possible <View>.
There has been a discussion about it in react-native and tushar-singh had the great idea to it.