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

[minhthong095]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

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>

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>

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[react-native-bot]

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[minhthong095]

Anyone? I believe it's a bug.

[esbenvb]

I have the same problem. This has been tested both on Expo and a standalone React Native app, both in appetize emulator and on a Xiaomi Pocophone F1. Same behavior, no horizontal nested scrolling on Android, but works great on iOS

Code here https://snack.expo.io/@esbenvb/scrollview-tests

Android behavior https://vimeo.com/322265966

iOS behavior https://vimeo.com/322266040

  React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
      Memory: 331.47 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.12.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-25 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5199772
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.58.6 => 0.58.6 

[keenubee]

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

[aanah0]

Have the same issue

[joaom182]

Same issue here

[ThakurKarthik]

+1 any fix regarding this?

[smm76]

Having the same issue. nestedScrollEnabled property works fine for vertical/vertical or vertical/horizontal (and vice versa) but seems to have no effect for nested horizontal scrollviews inside of another horizontal scrollview.
However, i found some kind of workaround for this. This is a bit hacky and does not work perfectly, as you have to actually drag the inner view, but it works.
You can capture the onTouchStart, onTouchEnd and onTouchCancel Events of the inner scrollview and set scrollEnabled on the outer scrollview to true or false correspondingly.