Menu
I have a ScrollView that I want to grow as needed up to a certain amount, but it seems to always be the size of maxHeight:
<ScrollView style={{flex: 1, maxHeight: "50%"}}><Text>Top</Text></ScrollView>
<View style={{flex: 1}}><Text>Bottom</Text></View>
What I wanted was for the Top view to be pretty small. And if the text there was longer, it would get taller as needed, but never taller than 50% of the screen. Is that possible?
254
In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.
ScrollView & Flexbox (Yes, that works!)
You can assign a ref to your ScrollView. This ref contains a function called scrollTo() . Now all we need to do is scroll the ScrollView to the desired position.
To get the current scroll position of ScrollView in React Native, we can set the onScroll prop of the ScrollView to a function that takes the scroll event object as an argument.
I have had to do something similar and found the solution to be:
<View style={{maxHeight:"50%"}}>
<ScrollView style={{flexGrow:0}}>
<Text>Top</Text>
</ScrollView>
</View>
<View style={{flex: 1}}><Text>Bottom</Text></View>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
