ScrollView nested within TouchableOpacity is not scrollable

[Liqiankun]

React Native version

React Native Environment Info:
System:
OS: macOS 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 30.81 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: yarn install v0.22.0
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.70s. - /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.2, macOS 10.14, tvOS 12.2, watchOS 5.2
IDEs:
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.9 => 0.59.9
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Reproduce

Snack react-native-scrollView-nested-touchable

[Yasser-G]

@Liqiankun
What is your use-case of nesting a ScrollView within a TouchableOpacity?

[Liqiankun]

@Yasser-G Our App has a venue list page. A venue has some images which let people know what the venue looks like. And these images need to be shown in the list item.

[Yasser-G]

This happens because of ScrollView TouchResponder covers its children touchables.
For this case I think you should edit your elements hierarchy to be as following:

<View style={styles.container}>
          <FlatList
            data={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
            renderItem={() => {
              return (
                <View style={styles.itemContainer}>
                  <Text>A performant interface for rendering simple, flat lists,
                  supporting the most handy features</Text>
                  <ScrollView
                    horizontal
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                  >
                    <TouchableOpacity style={{ flex: 1, flexDirection: "row" }} >
                      {[1, 2, 3, 4].map(img => (
                        <Image
                          resizeMode='contain'
                          key={`${img}`}
                          style={styles.image}
                          source={images.logo}
                        />
                      ))}
                    </TouchableOpacity>
                  </ScrollView>
                </View>
              );
            }}
          />
</View>

You can also add onPress prop to Text Component.

[Liqiankun]

@Yasser-G Yes, it can solve this issue, but not the best way. This way the item has more TouchableOpacity .

[Yasser-G]

ScrollView is a Touchable Component, So if you nested a touchable component inside another touchable component, the parent touchable will be responsible for handling your touch events.

This way the item has more TouchableOpacity .

To solve this you can set activeOpacity prop to 1 and use same method to handle onPress prop in both TouchableOpacity Component.

<TouchableOpacity onPress={this._onPressItem} activeOpacity={1}>
  <Text>A performant interface for rendering simple, flat lists,
      supporting the most handy features</Text>
</TouchableOpacity>

<TouchableOpacity onPress={this._onPressItem} activeOpacity={1}  style={{ flex: 1, flexDirection: "row" }} >
{[1, 2, 3, 4].map(img => (
  <Image key={`${img}`} style={styles.image} source={images.logo}  />
))}
</TouchableOpacity>

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.