React Native ScrollView doesn't scroll down

Question

inside my application index.io.js there is only 1 ScrollView , which is wrapped inside the View under the render function. Sometimes I can scroll to the very end of the ScrollView and hold the screen there. However, ScrollView will return to the top of the screen and cannot stay bottom down.

Does anyone know what is going on? Thank you

 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> } 

ps: my RN is 0.28.0, the iOS deployment target is 8.0

Answer 1

For React, native newbies like me:

looking for the installation error {flex:1} in the scrollview attribute of the contentContainerStyle, which basically tells the contentContainerStyle to explicitly not scroll and wait for it to scroll, as this sets the content height to the same parent frame, which is scrollview

Answer 2

To accurately answer the question, ScrollView must also have the style = {{flex: 1}} prop. ScrollingView requires a set height to scroll.

However, in my case, I had an addition in my scroll view, and this must have thrown some calculations into the depths of the system. I am using native 0.55 reaction.

To solve, I needed to change:

 <ScrollView style={{flex: 1, padding: 10}}> //Content goes here </ScrollView> 

in

 <View style={{padding: 10, flex: 1}}> <ScrollView style={{flex: 1}}> //Content goes here </ScrollView> </View> 

Answer 3

Keep in mind that ScrollViews must have a limited height in order to work, as they contain children with unlimited height in a limited container (via scroll interaction). To relate the height of the ScrollView, either set the height of the view directly (discouraged), or make sure all parent views have a limited height. Forgetting to pass {flex: 1} down, the view stack can lead to errors here, which the item inspector easily debugs.

https://facebook.imtqy.com/react-native/docs/scrollview.html

I think you should style your scrollView with the flex property: 1. And create a contentContainerStyle to have a better design.

Answer 4

Adding an additional useless view at the bottom of scrollView:

 <ScrollView> //your contents here <View style={{height:100(or any suitable value)}} /> </ScrollView> 

solved my problem.

Answer 5

 <ScrollView style={{flex: 1}}> <View style={styles.bottom}> { list.size > 0 && list.map((_, index) => { return ( <View style={styles.listItem} key={index}> <Text style={styles.count}>{index + 1}</Text> </View> ) }) } </View> </ScrollView> 

use flex: 1

Answer 6

When you use native to respond, use flexGrow instead of flex . If you want a more detailed guide for this reason, check out the article below:

https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08

Answer 7

The solution was tested for a reaction of 0.57

IDK, did you fix the problem, but this solution helped me

 <ScrollView> <View style={{ padding: 10 }}> // User contents here </View> </ScrollView> 

No need to bend anything. This calm code will generate a gutter view on all 4 sides. And the cool thing is that the last item is not cropped.

I am very lazy to add a router, so I added an application panel component to add some box at the top for the main content. The application panel component can be safely ignored.

Check out the demo here.

Answer 8

contentContainerStyle={{ paddingBottom: 60 }}

so applying a paddingBottom with a certain size should solve this for you