I have a simple View which has two children, another View and a ScrollView. The ScrollView should be 5x higher than the View on the same level, using flexbox.
<View style={{ flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}}>
<Text>Add new stuff</Text>
<Button title="Browse Gallery" onPress={ openGallery } />
</View>
<ScrollView style={{flex: 5, backgroundColor: 'skyblue'}}>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
</ScrollView>
</View>
Btw, using a second View instead of the ScrollView works just fine!
Any ideas how to achieve the 1:5 ratio with a ScrollView?
ScrollView & Flexbox (Yes, that works!)
scrollEventThrottle: It is used to control the firing of scroll events while scrolling.
In the ScrollView, we can scroll the components in both direction vertically and horizontally. By default, the ScrollView container scrolls its components and views in vertical. To scroll its components in horizontal, it uses the props horizontal: true (default, horizontal: false).
To do vertical centering when using ScrollView with React Native, we can set the contentContainerStyle prop to an object with some flexbox styles. to expand the ScrollView to fit the View . And we set justifyContent to 'center' to center align the ScrollView .
ScrollView is a component which doesn't inherit the use of flex
. What you want to do is wrap the ScrollView in a View which will create the flex ratio you desire.
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}}>
<Text>Add new stuff</Text>
<Button title="Browse Gallery" onPress={ openGallery } />
</View>
<View style={{flex: 5}}>
<ScrollView style={{backgroundColor: 'skyblue'}}>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
<Text style={{ fontSize: 100}}>Scroll me plz</Text>
</ScrollView>
</View>
</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