React-native: Nesting scrollViews and touchables not working

[compojoom]

This issue is actually a duplicate of: https://github.com/facebook/react-native/issues/10822
But I think that the original issue didn't have to be closed as this seems to be an annoying bug, that has a workaround, but at the end it is still a bug.

I have a repository of the issue:
https://github.com/compojoom/rnScrollBug

The code to reproduce this is is very simple:

<ScrollView style={styles.container}>
        <TouchableOpacity
          style={{backgroundColor: 'yellow', padding: 20}}
          onPress={() => this.setState({count: this.state.count+1})}>
          <Text>Count {this.state.count}</Text>
        </TouchableOpacity>

        <Text>selected +{this.state.selected.callCode}</Text>
        <FlatList
          style={{height: 300}}
          initialNumToRender={5}
          renderItem={this.renderItem}
          data={this.state.data}
        />
</ScrollView>

Basically when the nested Flatlist is scrolling touchables don't receive the touch. (And I'm not talking about touchable elements in the Flatlist, but outside of the flatlist)

That is actually unexpected since the parent ScrollView is not moving.

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

(Write your steps here:)

1. Launch https://github.com/compojoom/rnScrollBug
2. scroll the list of countries
3. try to press the count button

Expected Behavior

When pressing the count button - the coun't should update & one shouldn't wait for the flatlist to stop scrolling

Actual Behavior

Pressing the count button has no effect until the list stops scrolling.

Reproducible Demo

https://github.com/compojoom/rnScrollBug

[arcollector]

android only? i have the same problem in android, but not on ios, I ended up using on android this library https://github.com/cesardeazevedo/react-native-nested-scroll-view

[vivek-walecha-657-zz]

@compojoom we are also having this issue. what we did is we added a scrollEnabled prop on flatlist which is set for the parent by overriding the touch listener callbacks.

[dviluk]

Hi @vivek-walecha-657, how did you do that? Thanks

[nihalahmed]

+1
Very annoying problem. If you have a scroll view that is auto scrolling, any touchable just stops working until the scroll view stops scrolling.

[tuncaulubilge]

Can you try with #18299 ?

[khushboogupta1]

I am also facing same problem, please help with solution

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[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.

[rkhatak]

Hi,

I am using android emulator nexus s API and here nested scrollview is not working.
Please let me know if any workaround.

[tuncaulubilge]

@rkhatak Try react-native 0.56.0 and enable nestedScrollEnabled flag: https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled

[joaom182]

Reverse case is not working too.

<TouchableOpacity style={{backgroundColor: 'yellow', padding: 20}} onPress={() => this.setState({count: this.state.count+1})}>
   <ScrollView horizontal style={styles.container}>
      <Text>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla </Text>
   </ScrollView>
</TouchableOpacity>

ScrollView nevers scroll horizontally.