Well, not sure what’s up but everything seems to have started working now…
All I did locally was create another expo app, open that in the Expo client on my phone, close it and go back to my original app and ScrollView works properly… no code changes. Very odd!
Oh thats so weird, It took out the components I mentioned. I corrected my sentence.
I was asking if you have tried nesting the ScrollView inside of a View component. I briefly scanned previous answers to people having ScrollView problems and having a Flex 1 View component with a ScrollView child solved the problem for them.
<View style={{ height: someHeight}} > <ScrollView> <Component /> </ScrollView> </View>
it is working fine in android but issue only in ios.
it is showing only bouncing effect and doesn’t scroll to the bottom of the scroll vie
Try flex: 1 on your ScrollView. It’s important that your ScrollView is properly sized. You can verify its actual size by adding borderWidth: StyleSheet.hairlineWidth, borderColor: 'red' to draw a box around its bounds.
I have this issue and fixed it. To solve it:
flex:1 means “expand it to its parent size”, if parent have a 0 height, it won’t work
flex:-1 means “shrink it to fit its children size”, if child height set to flex:1 (depends on parent) → it wont’ work → you ask me? I ask you back. loop.
scrollview have two view in it → A {flex:1} outer view wrapped a {flex:-1} inner view. when inner view taller than outer view, that’s when scroll happen.
It also means outer view height depends on scrollview parent, inner view depends on children. If you cannot give a height to its outer view, the outer view will become 0 height. You cannot scroll inner view with a 0 height outer view, it will always bounce back to it origin position once your finger release.
wrap it with a <View style={{flex:1}}> may or may not solve your problems because it means the scrollview’s parent expand itself to fit its parent. (the grand parent of your scrollview). So if your grand parent have no height defined, it fail.
var {windowHeight, windowWidth} = Dimensions.get('window');
<View style={{height:windowHeight}}>
<Toolbar or other component with fixed height>
<ScrollView style={{flex:1}}>{contents}</ScrollView>
<Footer or other component with fixed height>
</View>
conclusion, make sure your scrollview height determinable both from outside and inside. If weird things happen trace the ancestor until you find a height or define a solid one within its traceable anscestor without rely on flex:1 Some third party module wrap things with a <View> which breaks things.