Menu
inside my application index.io.js there is only 1 ScrollView that is wrapped inside a View under the render function. Sometimes I can scroll to the very bottom of the ScrollView and keep the screen there. However the ScrollView would bounce back to the top of the screen and fail to stay at the bottom sometimes.
Does anyone know what is happening? Thanks.
render() { return <View style={{flex: 1}}> <ScrollView> <Text>234</Text> <Text>234</Text> <Text>234</Text> <Text>234</Text> // .... repeat so many times ... </ScrollView> </View> } p.s: my RN is 0.28.0, iOS deployment target is 8.0
222
To fix ScrollView Not scrolling with React Native, we wrap the content of the ScrollView with the ScrollView. to wrap ScrollView around the Text components that we render inside. As a result, we should see text inside and we can scroll up and down.
To keep a ScrollView scrolled to the bottom with React Native, we can assign a ref to the ScrollView and call scrollToEnd on it. For instance, we write: import * as React from 'react'; import { View, Text, ScrollView, Button } from 'react-native'; import { Card } from 'react-native-paper'; const a = Array(50) .
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.
For React native newbies like me:
lookout for making the error of setting {flex:1} on the scrollview's contentContainerStyle attribute, which is basically telling the scrollview explicitly not to scroll and expecting it to scroll, since this sets the content height to the same parent's frame which is the scrollview
199
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
