ScrollView not working on device in iOS Expo client

Expo SDK
1

I’m working on a basic app, started with create-react-native-app.

I spent a while attempting to get ScrollView components to actually scroll on my device, and eventually attempted the same in the iOS simulator.

What I found was that on my device ScrollView does not scroll at all, but within the iOS simulator everything works as expected.

My very-basic example app:

import React, { Component } from 'react';
import { 
  Text,
  View,
  ScrollView,
  StyleSheet
} from 'react-native';

const styles = StyleSheet.create({
  story: {
    flex: 1,
    width: 250,
    height: 250,
    alignSelf: 'center',
  },
});

class BasicApp extends Component {
  render() {
    return (
      <ScrollView style={{flex:1}}>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
        <View style={styles.story}>
          <Text>Story Title</Text>
          <Text>Story Text</Text>
        </View>
      </ScrollView>
    );
  }
}

export default BasicApp;

I’m wondering if this is a setting or a bug in the Expo client itself, or something I’m doing wrong?

Thanks for any help y’all can provide.

2

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!

1 Like
3

I’m glad that your issue was resolved, let us know if there anything else we can do to help!

4

I’m able to duplicate the exact same issue.

ScrollView works in the simulator but not in the Expo app. Unfortunately I was unable to reset it the way @willdavidow was able to.

5

Taking a random guess, have you tried wrapping your ScrollView inside of a View component?

6

Just to clarify, are you asking if I nested my ScrollView in a component?

7

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.

8

HI jimmylee,

<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

9

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.

2 Likes
10

@malangaveuday I have this same issue where the scrollview bounces. I have flex set to 1. This does not happen on Android, only in iOS.

1 Like
11

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.

The follow example won’t works

<View style={{height:300,width:200}}>
<View> //<-this break
<View {{flex:1}}>
<ScrollView>{contents}</ScrollView>
</View>
</View>
</View>

and this work:

 var {Windowheight, width} = Dimensions.get('window');
<View style={{height:Windowheight}}>
<View style={{flex:1}}>
<ScrollView>{contents}</ScrollView>
<View>
</View>

this also work:

 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.