Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

nestedScrollEnabled prop not working in ScrollView (Android) with horizontal direction

See original GitHub issue

Environment

Binaries: npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.1.0.0 AI-173.4907809 Package: “react”: “16.5.0”, “react-native”: “0.57.1”, Device Info: Android Version: 5.0.2 LRX22G

Description

I think nestedScrollEnabled prop for ScrollView only work in vertical. I don’t know what’s wrong in my code or something else. Just change little bit in height and width length and add/remove nestedScrollEnabled. Could anyone help me in this issue.

Reproducible Demo

VERTICAL

<ScrollView >
        <View style={{ backgroundColor: 'red', borderRightColor: 'white', borderWidth: 3, width: 500, height: 500 }}>
          <View style={{ borderWidth: 2, borderColor: 'blue', backgroundColor: 'yellow', width: 100, height: 300 }}>
            <ScrollView  nestedScrollEnabled>
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
            </ScrollView>
          </View>
        </View>
        <View style={{ backgroundColor: 'red', borderRightColor: 'white', borderWidth: 3, width: 500, height: 500 }}>
          <View style={{ borderWidth: 2, borderColor: 'blue', backgroundColor: 'yellow', width: 100, height: 300 }}>
            <ScrollView  nestedScrollEnabled>
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
              <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
            </ScrollView>
          </View>
        </View>
      </ScrollView>

vertical-scroll

HORIZONTAL

<ScrollView horizontal>
  <View style={{backgroundColor: 'red',borderRightColor: 'white', borderWidth: 3, width: 500, height: 500}}>
    <View style={{ borderWidth: 2, borderColor: 'blue', backgroundColor: 'yellow', width: 300, height: 100 }}>
      <ScrollView horizontal nestedScrollEnabled>
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
      </ScrollView>
    </View>
  </View>
  <View style={{backgroundColor: 'red',borderRightColor: 'white', borderWidth: 3, width: 500, height: 500}}>
    <View style={{ borderWidth: 2, borderColor: 'blue', backgroundColor: 'yellow', width: 300, height: 100 }}>
      <ScrollView horizontal nestedScrollEnabled>
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
        <View style={{ borderWidth: 3, borderColor: 'black', backgroundColor: 'purple', width: 100, height: 100 }} />
      </ScrollView>
    </View>
  </View>
</ScrollView>

horizontal-scroll

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:14
  • Comments:54 (7 by maintainers)

github_iconTop GitHub Comments

101reactions
brunolemoscommented, Oct 8, 2019

I found an easy workaround!

If we use the ScrollView from react-native-gesture-handler everything works as expected.

import { ScrollView } from 'react-native'
import { ScrollView as GestureHandlerScrollView } from 'react-native-gesture-handler'

<ScrollView horizontal>
    <GestureHandlerScrollView horizontal />
</ScrollVIew>

You can have nested horizontal FlatLists like this:

<FlatList {...props} renderScrollComponent={p => <GestureHandlerScrollView {...p} />} />

Updated the snack with this workaround: https://snack.expo.io/@brunolemos/nested-scrollview

gif-android-working </div>

Maybe someone can check what react-native-gesture-handle is doing and bring the same workaround to the core of react-native.

16reactions
keenubeecommented, Mar 28, 2019

Confirm, I have the same issue with nested horizontal scrolling. Please reopen, environment info added.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native Nested ScrollView Can`t Scroll on Android Device
Dear Alberto, I have a horizontal ScrollView which contains another horizontal scrollView, I've tried your solution but it doesn't work on android. Any...
Read more >
Common bugs in React Native ScrollView and how to fix them
The first and most common mistake of using ScrollView is not knowing ... have it on Android, we have to set the nestedScrollEnabled...
Read more >
ScrollView - React Native
This can be used for horizontal pagination. Note: Vertical pagination is not supported on Android. Type, Default. bool, false ...
Read more >
React Native ScrollView Component - GeeksforGeeks
It provides the scroll functionality in both directions- vertical and ... of using the ScrollView Component is its performance issues.
Read more >
React Native ScrollView Gotchas - Bionic Julia
63 comes with Android API level 24. FlatList inherits ScrollView props (unless it is nested in another FlatList of the same orientation). To...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Building and installing the app on the device (cd android && gradlew.bat installDebug): Could not install the app on the device, read the error above for details.

Next page

com.facebook.react.JavaScript (17): EXC_BAD_ACCESS (code=1, address=0xda9bf7c08)