React-Native, Scroll View Not Scrolling

Question

When I wrap content like this example below, it scrolls Perfectly..

return(
    <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        ...
    </ScrollView>
);

However, whenever I wrap it in another View, It will not scroll.

return(
    <View>
        <ScrollView>
            <Text> TEST </Text>
            <Text> TEST </Text>
            <Text> TEST </Text>
            <Text> TEST </Text>
            ...    
        </SCrollView>
    </View>
);

Is there some sort of fix to this. I am trying to put a nav bar header above all of the content, couldn't really figure it out though.

score 81 · Answer 1 · edited Nov 19 '19 at 14:54

81

It's a typo:
Your closing ScrollView tag is: </SCrollView> rather than </ScrollView>. You also need to add a style to the View container, here's an example of what it should look like:

return(
  <View style={{flex: 1}}>
    <ScrollView>
      <Text> TEST </Text>
      <Text> TEST </Text>
      <Text> TEST </Text>
      <Text> TEST </Text>
      ...    
    </ScrollView>
  </View>
);

edited Nov 19 '19 at 14:54

Kobe

6,226
1
14
35

answered Sep 17 '16 at 16:11

gran33

12,421
9
48
76

4

adding flex:1 indeed fixes it ! thankyou. this should be accepted answer – Shrouk Khan Dec 13 '16 at 10:30
13

this answer is incomplete. the requirements for a working scrollview appear to be flex:1 on the outer view and flexGrow:1 on the contentContainerStyle for the scrollview. – Gabe Rogan Sep 24 '19 at 15:30
1

this answer used to be correct 3 years ago, things might change – gran33 Sep 25 '19 at 09:42
4

doesn't work on android, i have tested pretty much every method here – Nicolas Silva Oct 08 '19 at 15:30
@NicolasSilva I was about to say the same think and GabeRogan answer was the one that worked – Dimitri Kopriwa Apr 26 '20 at 21:33

score 44 · Answer 2 · edited Jan 15 '19 at 16:46

44

Try next code:

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <Text> TEST </Text>
  <Text> TEST </Text>
  <Text> TEST </Text>
  <Text> TEST </Text>
</ScrollView>

edited Jan 15 '19 at 16:46

Nino Filiu

16,660
11
54
84

answered Oct 09 '18 at 11:18

Oleksandr Cherniavenko

1,475
8
14

5

came here looking for the solution like multiple times and every time this answer helped me. Thanks – HarshitMadhav Sep 18 '19 at 06:02
This doesn't really work for me. Could you take a look here? https://stackoverflow.com/questions/63437251/unable-to-scroll-in-scrollview – Aug 19 '20 at 16:22
4

If at all anybody is using this with `contentContainerStyle={{ flexGrow: 1, flex: 1 }}`, remove `flex: 1`. That's what was making the view unscrollable for me. – sj_959 Mar 11 '21 at 14:28
Remove `flex: 1` from `contentContainerStyle` it brokes the whole thing. And add `flexGrow: 1`. – Vladimir Vovk May 08 '21 at 22:16
This should have the check mark for the accepted answer – Hassan Sani Apr 23 '23 at 03:04

score 32 · Answer 3 · answered Apr 09 '21 at 21:01

32

If your ScrollView is within something that handles touch (Pressable, TouchableWithoutFeedback etc) then you either need to stop the touch event propagating up to that parent handler or else the ScrollView won't handle the touch event and therefore won't scroll.

This can be done either with onStartShouldSetResponder={() => true} or by wrapping the children in an element which itself handles the touch event (e.g. Pressable):

return (
  <ScrollView>
    <Pressable>
      <Text>This is scrollable</Text>
    <Pressable>
    <Pressable>
      <Text>As is this</Text>
    <Pressable>
  </ScrollView>
);

answered Apr 09 '21 at 21:01

fredrivett

5,419
3
35
48

2

Adding `` did the trick for me! – Amir5000 Jun 30 '21 at 07:06
Thanks man. I was having `PanResponder` as parent and for some reason my `Scrollview` was not scrolling even after passing true to `onStartShouldSetResponder` on iOS. This helped me to fix the issue. Thanks again. – Rohit Aggarwal Sep 30 '21 at 08:49
Glad to have helped @Rohit. – fredrivett Sep 30 '21 at 17:59
Thanks! I'm, using a wrapper with a press evento to hide the keyboard, ant this was making the scroll don't works. – José Neto Sep 08 '22 at 17:05
1

Thanks man! Pressable works for me also. I just used one Pressable component as a parent container for all my items. Didn't have to use many – David Mar 23 '23 at 19:38

leo7r · Answer 4 · 2016-09-17T18:45:30.633

23

Try adding style={{flex:1}} to <View> and <ScrollView> components. You also have a typo on your code: </SCrollView> in line 9. An example code will look like this:

<View style={{backgroundColor:'white', flex:1}}>
    <NavigationBar title="Title" />
    <ScrollView style={{flex:1, backgroundColor:'white'}}>
            <View style={{flex:1,justifyContent:'center'}}>
                <RegisterForm />
            </View>
    </ScrollView>
</View>

edited Sep 17 '16 at 18:45

answered Sep 17 '16 at 16:01

leo7r

10,468
1
22
26

5

in latest react version you cannot use `style` just use `contentContainerStyle` – Ali Akram Nov 27 '19 at 11:00
This doesn't really work for me. Could you take a look here? https://stackoverflow.com/questions/63437251/unable-to-scroll-in-scrollview – Aug 19 '20 at 16:21

score 13 · Answer 5 · answered Jun 01 '17 at 15:56

13

Another solution is to add a height property to the parent View container. This sometimes works well when calculating the height against the screen height.

render () {
  const screenHeight = Dimensions.get('window').height

  return(
    <View style={{height: screenHeight}}>
      <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
           ...    
      </ScrollView>
    </View>
  )
}

answered Jun 01 '17 at 15:56

Evan Siroky

9,040
6
54
73

its work well for me when run this project on snack as web – robby dwi hartanto Jan 05 '20 at 09:41
I tried adding height: 80%. However, when the keypad is open I can scroll but not to the end. and if I add height: 100%, I am not able to scroll at all. Could you take a look here? https://stackoverflow.com/questions/63437251/unable-to-scroll-in-scrollview – Aug 19 '20 at 16:27
adding style={{flex: 1, height: screenHight}} worked for me........!!! thanks !!! – Muhammad Abdullah Jul 08 '22 at 06:54

EJ Thayer · Answer 6 · 2021-01-14T14:07:56.303

5

I have tried all of these solutions and none were working. Then I just fully restarted the app and the metro server and everything worked fine.

edited Jan 14 '21 at 14:07

answered Jan 13 '21 at 21:24

EJ Thayer

151
2
3

1

Amazing how often this works. You spend hours working on something, in frustration you start the whole shebang and wow it all works. Something isn't right with metro (expo metro), but what? – gfmoore Aug 17 '21 at 14:27
1

I can't believe I have wasted so many hours on finding solution instead of restarting my app again. Everything worked fine after killing the app and restarting metro server again. Thanks for mentioning that. – Albert George Mar 18 '22 at 14:45

score 2 · Answer 7 · answered Dec 20 '19 at 07:29

2

As @Evan Siroky has answered above it's working well I'm just adding on thing for a auto height in case you don't want to reserve the space

render () {
  const screenHeight = Dimensions.get('window').height
  return(
    <View style={{ Height: "auto", maxHeight: screenHeight}}>
      <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
           ...    
      </ScrollView>
    </View>
  )
}

answered Dec 20 '19 at 07:29

Muhammad Bilal

29
5

I tried adding height: auto but then I can't scroll at it. It works partially with height: 80% tho. Could you take a look here please? https://stackoverflow.com/questions/63437251/unable-to-scroll-in-scrollview – Aug 19 '20 at 16:30
I think so you can fix this issue by following below tips: 1)Adjusting ScrollView tag position most probably it will go above your condition directly inside <>> 2)By adjusting height and maxHeight property and flex property – Muhammad Bilal Aug 22 '20 at 07:10

score 2 · Answer 8 · answered Feb 20 '23 at 09:40

2

removing contentContainerStyle prop from the ScrollView has fixed the issue for me

answered Feb 20 '23 at 09:40

Oren Zvi

31
1

score 2 · Answer 9 · answered Apr 09 '23 at 08:52

I have tried above mentioned answers, but it didtn't work for me. Default ScrollView works well in the ios, but in the android it is not.

I have tried nestedScrollEnabled={true} as mentioned in the document here it works well in android.

Note: For ios, after adding nestedScrollEnabled={true} along with scrollEnabled={true} works fine. Refer here

<View style={styles.catBody}>
  <ScrollView 
    scrollEnabled={true}
    nestedScrollEnabled={true}
  >
    <Text style={styles.catBodyText}>{props.item.description}</Text>
  </ScrollView>
</View>

score 1 · Answer 10 · answered Jun 24 '21 at 16:13

1

I had a similar issues, it got solved by removing height/width if set to '100%'.

Just adding here if someone faces the same issues. :D

answered Jun 24 '21 at 16:13

NevetsKuro

604
7
14

score 0 · Answer 11 · answered Mar 16 '21 at 06:35

0

Set nestedScrollEnabled as true for Hybrid Android + react app as it might be issue with gesture/click for scrolling issue.

answered Mar 16 '21 at 06:35

Android_IT

396
2
5
24

score 0 · Answer 12 · answered Jan 07 '22 at 07:13

Just if anyone is as desperate as I was: My view was inside a StackNavigator. In the StackNavigator you can assign a default cardStyle. This card style needs height: "100%".

For me this was the case but I had overwritten it within the cardStyle of the Stack.Screen definition.

See this working example:

// This is the stack navigator

<ModalStack.Navigator screenOptions={() => ({
    cardStyle: {height: "100%"}
});}}>
    <ModalStack.Screen name={ScreenItemDetail} options={{
        // cardStyle: {} be sure to not override card style again! 
        
    }} component={ItemDetailScreen} />

    // ...

</ModalStack.Navigator>

score 0 · Answer 13 · answered Apr 16 '23 at 19:36

0

For me issue was using percentage in width and margin of items.

answered Apr 16 '23 at 19:36

Widar

27
6

score 0 · Answer 14 · answered Aug 22 '23 at 15:12

I noticed that my screen would only scroll if I scrolled from clickable elements.

I've found that wrapping the ScrollView's content in a TouchableOpacity and TouchableWithoutFeedback was the neatest way to get my scrolling working well without any strange clicking side effects.

In the end you end up with this:

<ScrollView {...scrollViewPropsAndStylesEtc}>
  <TouchableOpacity>
    <TouchableWithoutFeedback>
      {content}
    </TouchableWithoutFeedback>
  </TouchableOpacity>

</ScrollView>

score 0 · Answer 15 · answered Aug 26 '23 at 19:14

The top answer, which is correct, advises the following to stop the touch event from propagating up to the ScrollView parent:

wrapping the children in an element which itself handles the touch event (e.g. Pressable)

I found that some components that handle the touch event do not suffice. In my case it was RectButton from react-native-gesture-handler.

In this situation you have two options:

Wrap all ScrollView children into a single Pressable - it doesn't even need an onPress prop.
Replacing touchable children that are not Pressable with Pressable (or perhaps another touchable component that does work, I haven't tried others).

Shavez Ali · Answer 16 · 2022-12-07T09:15:39.917

-1

Just add ScrollView as parent View if it's still not working for you...just restart your app or server and your ScrollView will work fine. Because sometimes our app freezes for no reason.

edited Dec 07 '22 at 09:15

answered Dec 07 '22 at 09:09

Shavez Ali

1
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 13 '22 at 11:41

score -3 · Answer 17 · answered Dec 28 '20 at 15:50

I think the best way of doing this is to put all requires inside an array and map this array.

const images = [
  require('../your/path/here'),
  require('../other/image/here'),
  ...
];

return ( {images.map((image) => <Image ... source={image} />)

note that if you want it as a background image with other elements above the image, you may use BackgroundImage and either render elements for each image or position absolute the image map and zIndex it behind all things

React-Native, Scroll View Not Scrolling

17 Answers17

Linked

Related