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

minhthong095 · 2018-10-01T09:31:06Z

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>

The text was updated successfully, but these errors were encountered:

react-native-bot · 2018-10-01T10:05:11Z

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 · 2018-10-09T00:05:12Z

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 · 2018-10-22T13:31:23Z

Anyone? I believe it's a bug.

esbenvb · 2019-03-08T16:07:47Z

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 · 2019-03-28T15:17:30Z

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

aanah0 · 2019-05-29T07:47:38Z

Have the same issue

joaom182 · 2019-05-29T11:44:45Z

Same issue here

ThakurKarthik · 2019-06-12T12:47:51Z

+1 any fix regarding this?

smm76 · 2019-08-01T05:35:23Z

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.

superKalo · 2019-08-06T16:10:39Z

I'm experiencing the same issue. @smm76 yep, tried this hackish workaround too, but it doesn't feel 'fluid' enough.

Please reopen the issue.

superKalo · 2019-08-06T16:17:10Z

@zhongwuzw , can you please re-open this issue or please tell any other collaborator to re-open it, since the @react-native-bot closed it.

superKalo · 2019-08-07T13:58:25Z

For the brave hearts who fight with this issue, here's my workaround.

I have a horizontal <FlatList /> (parent) and a horizontal <ScrollView /> (child).

On my inner ScrollView (child) I am disabling the <FlatList /> (parent) scroll onTouchStart and I am enabling it back onScrollEndDrag, similarly like @smm76 suggested. But additionally, I'm doing this throttle magic, which kind of solves all the little edge cases when the user doesn't immediately start dragging.

import throttle from 'lodash/throttle';

...

<ScrollView
  horizontal={true}
  scrollEventThrottle={16}
  // ... bla bla

  onTouchStart={() => {
    if (Platform.OS === 'android') {
      this.props.onTouchStartDisableScrollOnAndroid(); // disables parent scroll

      // If the `onScrollEndDrag` event is not fired almost immediately
      // after this one (and user doesn't start dragging)
      // fire up `onTouchEndEnableScrollOnAndroid` and enable back
      // the parent horizontal view scroll.
      // This may happen when the user quickly taps on the component
      // but doesn't start dragging.
      this.throttledOnScrollEndDragOnAndroid = throttle(
          this.props.onTouchEndEnableScrollOnAndroid,  // enables parent scroll
          300,
          {
              leading: false,
          },
      );
      this.throttledOnScrollEndDragOnAndroid();
    }
  }}
  onScrollEndDrag={() => {
    if (Platform.OS === 'android') {
      this.props.onTouchEndEnableScrollOnAndroid(); // enables parent scroll

      if (this.throttledOnScrollEndDragOnAndroid) {
          this.throttledOnScrollEndDragOnAndroid.cancel();
      }
    }
  }}
>
  /* content */
</ScrollView>

timorss · 2019-08-08T15:34:27Z

on all the scrollviews add prop nestedScrollEnabled,
including the nested scrollview!

fjmorant · 2019-08-09T10:46:26Z

Same problem for me, with:

<FlatList horizontal nestedScrollEnabled={true}>
    <ScrollView horizontal nestedScrollEnabled={true}>
    </ScrollView>
</FlatList>

And when you try to scroll the child horizontally it scrolls the parent :(

brunolemos · 2019-10-08T05:25:32Z

Oh No. I'm facing this as well. Nested horizontal scrollviews doesn't work on Android. nestedScrollEnabled has no effect in this case. Still happening on react-native 0.61.

I made this Snack with a reproduction: https://snack.expo.io/@brunolemos/nested-scrollview

See full code

import React from 'react'
import { ScrollView, ScrollViewProps, View, ViewProps } from 'react-native'

function App() {
  return <Columns />
}

export default App

function Story(props: ViewProps) {
  return (
    <View
      {...props}
      style={[
        {
          width: 30,
          height: 30,
          borderRadius: 30 / 2,
          backgroundColor: 'blue',
        },
        props.style,
      ]}
    />
  )
}

function Stories(props: ScrollViewProps) {
  return (
    <ScrollView
      horizontal
      nestedScrollEnabled
      {...props}
      style={[
        {
          width: '100%',
          maxHeight: 30 + 2 * 2,
          backgroundColor: 'lightyellow',
        },
        props.style,
      ]}
    >
      <Story style={{ margin: 2 }} />
      <Story style={{ margin: 2 }} />
      <Story style={{ margin: 2 }} />
      <Story style={{ margin: 2 }} />
      <Story style={{ margin: 2 }} />
      <Story style={{ margin: 2 }} />
      <Story style={{ margin: 2 }} />
      <Story style={{ margin: 2 }} />
      <Story style={{ margin: 2 }} />
      <Story style={{ margin: 2 }} />
    </ScrollView>
  )
}

function Column(props: ViewProps) {
  return (
    <View
      {...props}
      style={[
        {
          paddingTop: 40,
          width: 200,
          height: '100%',
          backgroundColor: 'lightgreen',
        },
        props.style,
      ]}
    >
      <Stories />
    </View>
  )
}

function Columns(props: ScrollViewProps) {
  return (
    <ScrollView
      horizontal
      nestedScrollEnabled
      {...props}
      style={[
        { width: '100%', height: '100%', backgroundColor: 'lightblue' },
        props.style,
      ]}
    >
      <Column style={{ margin: 10 }} />
      <Column style={{ margin: 10 }} />
      <Column style={{ margin: 10 }} />
      <Column style={{ margin: 10 }} />
      <Column style={{ margin: 10 }} />
      <Column style={{ margin: 10 }} />
      <Column style={{ margin: 10 }} />
      <Column style={{ margin: 10 }} />
      <Column style={{ margin: 10 }} />
      <Column style={{ margin: 10 }} />
    </ScrollView>
  )
}

brunolemos · 2019-10-08T05:47:07Z

@andreicoman11 @makovkastar @aamalric @astreet I checked the file blame and noticed you contributed a lot to the ReactHorizontalScrollView.java file. I was wondering (hoping) if you have any insight of what could be causing the issue above and what the fix could look like?

aamalric · 2019-10-08T06:42:34Z

@brunolemos My contribution was just about preventing scrolling with D-Pad key events when scroll is disabled, nothing to do with nested scroll with touch events...
Looking at the code I don't really see why it's not working, there's no difference between vertical and horizontal scroll managers code for Android, they both call:

ViewCompat.setNestedScrollingEnabled(view, value);

https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java#L157

https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java#L167

ThakurKarthik · 2019-10-08T06:50:58Z

I used React Native Swiper for this purpose.(Nested Scrolling) EDIT: React Native Swiper used ViewPager before the latest release,now it is not working in the newer version,One thing i have seen is that viewpager is replaced by ScrollView now,Is the answer suggested by @brunolemos a good to go solution for now?

…

On Tue 8 Oct, 2019, 12:15 Alexandre AMALRIC, ***@***.***> wrote: @brunolemos <https://github.com/brunolemos> My contribution was just about preventing scrolling with D-Pad key events when scroll is disabled, nothing to do with nested scroll with touch events... Looking at the code I don't really see why it's not working, there's no difference between vertical and horizontal scroll managers code for Android, they both call: ViewCompat.setNestedScrollingEnabled(view, value); https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java#L157 https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java#L167 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#21436?email_source=notifications&email_token=AGIXKMVCYDBVR5RNE5CRYFDQNQUBTA5CNFSM4FYGYUC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEATA3HQ#issuecomment-539364766>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGIXKMXAMPFJ6IVEMKYFPVLQNQUBTANCNFSM4FYGYUCQ> .

brunolemos · 2019-10-08T08:45:36Z

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

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

smm76 · 2019-10-08T09:25:49Z

@brunolemos nice one! Just tried on a real device and it worked!
Weird anyway, how does the gesture-handler implementation differ from native ScrollView?
Is this down to touch recognition?

cklinx · 2019-10-08T16:52:35Z

@brunolemos Thanks so much!

It's scrolling but now the nestedScrollEnabled prop not works.

Any idea?

brunolemos · 2019-10-10T04:19:48Z

@cklinx why do you still need this prop if it's already scrolling correctly? also confirm that you are using the latest version of both react-native (0.61.2) and react-native-gesture-handler (1.4.1).

vikks · 2021-01-26T11:05:16Z

For the ScrollViews to work as expected, nested or otherwise, you need to specify their boundaries. Boundaries are set in
"style" property of the ScrollViews.

import { ScrollView } from 'react-native'

//
<ScrollView 
     style={{ 
           width: "equal-to-or-less-than viewport width", 
           height: "equal-to-or-less-than viewport height"
     }}
    contentContainerStyle={{"..."}}
    horizontal
>
    <ScrollView 
           style={{
              width: "lower-than Parent-ScrollView width",
              height: "lower-than Parent-ScrollView height"
           }} 
           contentContainerStyle={{"..."}}
    >
    </ScrollView>
</ScrollVIew>

NOTE: Always Set explicit boundaries(width/height) for Scrollview. So basically all sides of the border have to appear on the screen

fabOnReact · 2021-02-09T17:15:41Z

Thanks a lot @isnotgood for pr #28138 which seems to implement this solution.

I did not study much the ReactNativeGestureHandler ScrollView horizontal component #21436 (comment) which does not have this issue

I'm curious in the reason @isnotgood closed pr #28138, maybe performance limitation compared to ReactNativeGestureHandler?

the lookup code could be performance bottleneck in some extreme cases and I'm willing to optimize it further if it will be considered

Tomorrow I will give a further look in the ReactNativeGestureHandler implementation to see if I can understand and apply the same solution to HorizontalScrollView.java

I am also considering creating a pull request to add information about this bug in the ScrollView docs so that the solution is easier to find. Thanks

isnotgood · 2021-02-09T20:20:45Z

@fabriziobertoglio1987 there was no problem, I just closed it as there was no interest from maintainers 😄 Feel free to resurrect the PR on your own if you think it's worth the effort.

Resolves facebook#21436

dincozdemir · 2021-03-13T11:42:55Z

I re-opened the PR with the permission of @isnotgood

scousino · 2021-07-06T14:22:54Z

Just bumping in here to show people are still waiting for this fix. Can we get some maintainers to review this PR and get the fix in already.

Magnus-V · 2022-02-24T15:26:55Z

Encountering the same problem in react native 0.66.4. Any fix planned?

HoangTran0410 · 2022-08-04T04:42:44Z

I have tried to use ScrollView from react-native-gesture-handler and add disableIntervalMomentum props, then it worked!

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

<ScrollView horizontal disableScrollViewPanResponder>
    <ScrollView horizontal />
</ScrollVIew>

faerylay · 2022-11-24T13:43:18Z

i found this problem when we use nested scrollView to prevent horizontal or vertical scroll error but its doesnt work in android .so i make it like this (sry for my english )

> - [ ] <scrollView vertical>
> - [ ] <scrollView horizontal >  <--- this scrollview component is not using just prevent scrollview same props error (so just add scrollEnabled to false ) thats it no need to add     nestedScrollEnabled
> - [ ] <scrollView vertical>
> - [ ] 
> - [ ] </scrollView vertical>
> - [ ] </scrollView horizontal>
> - [ ] </scrollView vertical>

russmenum · 2023-01-23T17:36:44Z

Is there ever going to be a fix for this 2023 and still a bug

vikashkeshri14 · 2023-02-03T20:54:50Z

here is the solution just add extra scrollView with different oriantation it will solve the issue ex
<ScrollView vertical> <ScrollView horizontal> <ScrollView vertical></ScrollView> </ScrollView> </ScrollView>

russmenum · 2023-02-07T14:03:19Z

here is the solution just add extra scrollView with different oriantation it will solve the issue ex <ScrollView vertical> <ScrollView horizontal> <ScrollView vertical></ScrollView> </ScrollView> </ScrollView>

Even that was not working, it seems there is a bug with respect to the Android gesture/swipe. If you are on a screen where an Android user can swipe back, the nested scroll layer is not accessible for most of the screen. While disabling swipe allows the nested scroll to work, ideally, there would be a way to fix them layering on top of each other incorrectly.

It is not like Android is going to abandon nav gestures and users expect them at this point

Glaysonvisgueira · 2023-04-20T14:39:08Z

For the ScrollViews to work as expected, nested or otherwise, you need to specify their boundaries. Boundaries are set in "style" property of the ScrollViews.

import { ScrollView } from 'react-native'

//
<ScrollView 
     style={{ 
           width: "equal-to-or-less-than viewport width", 
           height: "equal-to-or-less-than viewport height"
     }}
    contentContainerStyle={{"..."}}
    horizontal
>
    <ScrollView 
           style={{
              width: "lower-than Parent-ScrollView width",
              height: "lower-than Parent-ScrollView height"
           }} 
           contentContainerStyle={{"..."}}
    >
    </ScrollView>
</ScrollVIew>

NOTE: Always Set explicit boundaries(width/height) for Scrollview. So basically all sides of the border have to appear on the screen

This works perfectly, thanks for the explanation!

Miriatowa · 2023-04-27T08:01:29Z

I tried the following schemes:
1.import { ScrollView } from 'react-native-gesture-handler' ，This solution can solve the sliding nesting problem, but some Android models, such as Xiaomi and Huawei, will report errors
2. This scheme will not solve the problem，like this：
<scrollView vertical> <scrollView horizontal > <scrollView vertical> </scrollView vertical> </scrollView horizontal> </scrollView vertical>
3、So the way I'm doing it so far is when I click on the inner scrollview, I disable the outer scrollview, and when I click on the outer ScrollView, I enable the outer scrollView. Note that if scrollview does not allow scrolling, you need to use setNativeprops to directly change the underlying view, not setState. Asynchronous rendering would make it difficult to respond to state changes in a timely manner, resulting in delays and insensitivity

Glaysonvisgueira · 2023-04-27T12:39:48Z

I tried the following schemes: 1.import { ScrollView } from 'react-native-gesture-handler' ，This solution can solve the sliding nesting problem, but some Android models, such as Xiaomi and Huawei, will report errors 2. This scheme will not solve the problem，like this： <scrollView vertical> <scrollView horizontal > <scrollView vertical> </scrollView vertical> </scrollView horizontal> </scrollView vertical> 3、So the way I'm doing it so far is when I click on the inner scrollview, I disable the outer scrollview, and when I click on the outer ScrollView, I enable the outer scrollView. Note that if scrollview does not allow scrolling, you need to use setNativeprops to directly change the underlying view, not setState. Asynchronous rendering would make it difficult to respond to state changes in a timely manner, resulting in delays and insensitivity

Have you tried putting sizes on all ScrollViews as explained above? For me it works fine.

Miriatowa · 2023-04-28T02:52:47Z

I tried the following schemes: 1.import { ScrollView } from 'react-native-gesture-handler' ，This solution can solve the sliding nesting problem, but some Android models, such as Xiaomi and Huawei, will report errors 2. This scheme will not solve the problem，like this： <scrollView vertical> <scrollView horizontal > <scrollView vertical> </scrollView vertical> </scrollView horizontal> </scrollView vertical> 3、So the way I'm doing it so far is when I click on the inner scrollview, I disable the outer scrollview, and when I click on the outer ScrollView, I enable the outer scrollView. Note that if scrollview does not allow scrolling, you need to use setNativeprops to directly change the underlying view, not setState. Asynchronous rendering would make it difficult to respond to state changes in a timely manner, resulting in delays and insensitivity

Have you tried putting sizes on all ScrollViews as explained above? For me it works fine.

I tried that, but it didn't work for me

Glaysonvisgueira · 2023-04-28T11:24:31Z

I tried the following schemes: 1.import { ScrollView } from 'react-native-gesture-handler' ，This solution can solve the sliding nesting problem, but some Android models, such as Xiaomi and Huawei, will report errors 2. This scheme will not solve the problem，like this： <scrollView vertical> <scrollView horizontal > <scrollView vertical> </scrollView vertical> </scrollView horizontal> </scrollView vertical> 3、So the way I'm doing it so far is when I click on the inner scrollview, I disable the outer scrollview, and when I click on the outer ScrollView, I enable the outer scrollView. Note that if scrollview does not allow scrolling, you need to use setNativeprops to directly change the underlying view, not setState. Asynchronous rendering would make it difficult to respond to state changes in a timely manner, resulting in delays and insensitivity

Have you tried putting sizes on all ScrollViews as explained above? For me it works fine.

I tried that, but it didn't work for me

Can you show your code?

jessebwr · 2023-08-22T14:14:25Z

We've finally are addressing this internally: #39097. Hopefully should be merged soon.

zach-shute-cb · 2023-10-23T22:50:15Z

Looks like this was merged. Any idea when it will go out or which version of RN will get it? I looked at the (CHANGELOG.md)[https://github.com/facebook/react-native/blob/main/CHANGELOG.md] and was not able to find any indication that this fix had gone live

zach-shute-cb · 2023-10-23T22:50:52Z

cc @jessebwr

lorenzomilesi · 2023-10-25T10:39:56Z

Looks like this was merged. Any idea when it will go out or which version of RN will get it? I looked at the (CHANGELOG.md)[https://github.com/facebook/react-native/blob/main/CHANGELOG.md] and was not able to find any indication that this fix had gone live

It will be in the 0.73.x release. Take a look at this commit tag.

nonjee888 · 2023-12-28T14:35:24Z

I just upgrade RN version to 0.73.1 and checked, but still horizontal doesn't work for the nested ScrollView in my code. Anyone has found it works horizontally?

github-actions · 2024-06-26T05:00:55Z

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions · 2024-07-03T05:01:09Z

This issue was closed because it has been stalled for 7 days with no activity.

react-native-bot added the 🔶Components label Oct 1, 2018

react-native-bot added the 📋No Environment Info label Oct 1, 2018

minhthong095 changed the title ~~nestedScrollEnabled prop not working in ScrollView with horizontal direction~~ nestedScrollEnabled prop not working in ScrollView (Android) with horizontal direction Oct 1, 2018

react-native-bot added the Platform: Android Android applications. label Oct 1, 2018

react-native-bot added the Ran Commands One of our bots successfully processed a command. label Oct 9, 2018

react-native-bot closed this as completed Oct 9, 2018

zhongwuzw reopened this Aug 6, 2019

zhongwuzw removed the Resolution: Missing Environment Info label Aug 7, 2019

This comment has been minimized.

Sign in to view

dincozdemir added a commit to dincozdemir/react-native that referenced this issue Mar 13, 2021

fix: android nested scrollview

1d2abbc

Resolves facebook#21436

dincozdemir mentioned this issue Mar 13, 2021

Enable nested scrolling of horizontal scrollviews on Android #31150

Closed

aliunco mentioned this issue Jul 11, 2023

bugfix: use ScrollView as parent (Android) erksch/react-native-wheely#56

Open

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jun 26, 2024

github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Jul 3, 2024

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

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

Comments

minhthong095 commented Oct 1, 2018 • edited Loading

Environment

Description

Reproducible Demo

react-native-bot commented Oct 1, 2018

react-native-bot commented Oct 9, 2018

minhthong095 commented Oct 22, 2018

esbenvb commented Mar 8, 2019 • edited Loading

keenubee commented Mar 28, 2019 • edited Loading

aanah0 commented May 29, 2019

joaom182 commented May 29, 2019

ThakurKarthik commented Jun 12, 2019

smm76 commented Aug 1, 2019

superKalo commented Aug 6, 2019

superKalo commented Aug 6, 2019

superKalo commented Aug 7, 2019

timorss commented Aug 8, 2019

fjmorant commented Aug 9, 2019

brunolemos commented Oct 8, 2019

brunolemos commented Oct 8, 2019

aamalric commented Oct 8, 2019

ThakurKarthik commented Oct 8, 2019 via email • edited Loading

brunolemos commented Oct 8, 2019 • edited Loading

smm76 commented Oct 8, 2019

cklinx commented Oct 8, 2019 • edited Loading

brunolemos commented Oct 10, 2019 • edited Loading

vikks commented Jan 26, 2021 • edited Loading

This comment has been minimized.

This comment has been minimized.

fabOnReact commented Feb 9, 2021

isnotgood commented Feb 9, 2021

dincozdemir commented Mar 13, 2021

scousino commented Jul 6, 2021

Magnus-V commented Feb 24, 2022

HoangTran0410 commented Aug 4, 2022

faerylay commented Nov 24, 2022 • edited Loading

russmenum commented Jan 23, 2023

vikashkeshri14 commented Feb 3, 2023 • edited Loading

russmenum commented Feb 7, 2023

Glaysonvisgueira commented Apr 20, 2023

Miriatowa commented Apr 27, 2023 • edited Loading

Glaysonvisgueira commented Apr 27, 2023

Miriatowa commented Apr 28, 2023

Glaysonvisgueira commented Apr 28, 2023

jessebwr commented Aug 22, 2023

zach-shute-cb commented Oct 23, 2023

zach-shute-cb commented Oct 23, 2023

lorenzomilesi commented Oct 25, 2023

nonjee888 commented Dec 28, 2023

github-actions bot commented Jun 26, 2024

github-actions bot commented Jul 3, 2024

minhthong095 commented Oct 1, 2018 •

edited

Loading

esbenvb commented Mar 8, 2019 •

edited

Loading

keenubee commented Mar 28, 2019 •

edited

Loading

ThakurKarthik commented Oct 8, 2019 via email •

edited

Loading

brunolemos commented Oct 8, 2019 •

edited

Loading

cklinx commented Oct 8, 2019 •

edited

Loading

brunolemos commented Oct 10, 2019 •

edited

Loading

vikks commented Jan 26, 2021 •

edited

Loading

faerylay commented Nov 24, 2022 •

edited

Loading

vikashkeshri14 commented Feb 3, 2023 •

edited

Loading

Miriatowa commented Apr 27, 2023 •

edited

Loading