Sometimes you are unable to click

[alexpchin]

Current behavior

Currently, sometimes after scrolling a Tab.FlatList you are unable to click on one of the rendered items (if they are a touchable). This doesn't happen all of the time but sometimes it does.

Expected behaviour

I would expect that after scrolling, all items that are clickable are able to be clicked.

[alexpchin]

I think this was resolved either in rc.5 or rc.6. Closing for now.

[abelmenkveld]

Hi @alexpchin could you please reopen this issue? I'm still encountering this issue running rc.9. It happens in both Tab.FlatList and Tab.ScrollView on iOS. The behavior is very specific: when a scroll action/animation hasn't finished yet and you scroll again, the content isn't clickable anymore. It becomes clickable again only when you scroll to the top or bottom of the list or view. See the video for a demo. Thanks!

https://user-images.githubusercontent.com/15447148/108205147-f2ba7780-7124-11eb-9bef-e976cbba581f.MP4

[andreialecu]

@abelmenkveld

I cannot reproduce this. Here's the diff I tested with:

diff --git a/example/src/Shared/Contacts.tsx b/example/src/Shared/Contacts.tsx
index beeeccf..c4f27f3 100644
--- a/example/src/Shared/Contacts.tsx
+++ b/example/src/Shared/Contacts.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { View, Text, StyleSheet, Platform } from 'react-native'
 import * as Tabs from 'react-native-collapsible-tab-view'
+import { TouchableOpacity } from 'react-native-gesture-handler'
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
@@ -70,17 +71,19 @@ class ContactItem extends React.PureComponent<{
     const { item } = this.props

     return (
-      <View style={styles.item}>
-        <View style={styles.avatar}>
-          <Text style={styles.letter}>
-            {item.name.slice(0, 1).toUpperCase()}
-          </Text>
+      <TouchableOpacity>
+        <View style={styles.item}>
+          <View style={styles.avatar}>
+            <Text style={styles.letter}>
+              {item.name.slice(0, 1).toUpperCase()}
+            </Text>
+          </View>
+          <View style={styles.details}>
+            <Text style={styles.name}>{item.name}</Text>
+            <Text style={styles.number}>{item.number}</Text>
+          </View>
         </View>
-        <View style={styles.details}>
-          <Text style={styles.name}>{item.name}</Text>
-          <Text style={styles.number}>{item.number}</Text>
-        </View>
-      </View>
+      </TouchableOpacity>
     )
   }
 }

[abelmenkveld]

Thanks for getting back this quickly. Thanks to your diff I tried importing TouchableOpacity from react-native-gesture-handler instead of from react-native. This fixes the issue.

[alexpchin]

I'm actually still seeing this issue sometimes in my bare react-native app, @andreialecu can you re-open please?

[andreialecu]

Reopened. But there is nothing in the code that can explicitly prevent touches on elements. If this happens it seems like an upstream bug.

[alexpchin]

Thanks @andreialecu What do you mean by upstream bug?

[alexpchin]

I think this is happening when you tap whilst the list is moving. So scroll and whilst it's scrolling tap and then tap something again.

[andreialecu]

I mean either a react native or some weird reanimated bug. Without a repro I can't tell though either way.

[alexpchin]

I'll make a repo and try to find the steps to reproduce so you can replicate.

[andreialecu]

Did you try this solution? https://github.com/PedroBern/react-native-collapsible-tab-view/issues/123#issuecomment-780582754

[alexpchin]

Hi @andreialecu I've pushed an example here: https://github.com/andreialecu/rnctv-react-native-bare-test/pull/2 Please see if you can reproduce the error.

I just cycled through the various components to compare:

<Tabs.FlatList
      numColumns={2}
      data={covers}
      ListEmptyComponent={ListEmptyComponent}
      renderItem={({item, index}) => {
        const PressableComponent =
          index % 4 === 0
            ? TouchableOpacityRNGH
            : index % 3 === 0
            ? TouchableWithoutFeedback
            : index % 2 === 0
            ? TouchableOpacity
            : Pressable;
        const PressableComponentString =
          index % 4 === 0
            ? 'TouchableOpacityRNGH'
            : index % 3 === 0
            ? 'TouchableWithoutFeedback'
            : index % 2 === 0
            ? 'TouchableOpacity'
            : 'Pressable';
        return (
          <PressableComponent
            onPress={() => Alert.alert(PressableComponentString)}>
            <Image source={{uri: item}} style={styles.cover} />
          </PressableComponent>
        );
      }}
      keyExtractor={(_, i) => String(i)}
      refreshing={isRefreshing}
      onRefresh={onRefresh}
    />

It seems that there is an issue with TouchableOpacity, TouchableWithoutFeedback and Pressable from React Native but not with TouchableOpacity from react-native-gesture-handler. This. happens only after you scroll.

[andreialecu]

Fixed in rc.11. This seems like a react-native bug of some sort because of scrolling inside onBeginDrag (in order to stop scrolling, see: https://github.com/software-mansion/react-native-reanimated/issues/1699). Removed it for now.