React Native "Pressable" Elements sometimes don't respond

106 Views Asked by At

I have a BigList element that renders group of Pressable elements. Elements work perfectly most of the time but sometimes they don't respond. It just doesn't press. BigList Element:

<BigList
  data={innerSoldierData}
  keyExtractor={(item) => {
    return `${item.urn}`;
  }}
  numColumns={5}
  itemHeight={250}
  renderItem={(itemData) => {
    return <View style={[
      {
        flex: 1,
        margin: 8,
        marginVertical: 16,
        height: 200,
        borderRadius: 8,
        elevation: 4,
        backgroundColor: "white",
        shadowColor: "black",
        shadowOpacity: 0.25,
        shadowOffset: { width: 0, height: 2 },
        shadowRadius: 8,
        overflow: Platform.OS === "android" ? "hidden" : "visible",
        height: 200,
        justifyContent: "center",
      },
    ]}><Pressable android_ripple={{ color: "#ccc" }}
                  style={({ pressed }) => [
                    { flex: 1 },
                    pressed ? {
                      backgroundColor: "#ccc",
                      opacity: 0.5,
                    } : null,
                  ]}>
      ...other stuff here

    </Pressable></View>;
  }}
  refreshing={isLoading}
  onRefresh={onRefresh}
  refreshControl={<RefreshControl refreshing={isLoading} />}
/>
0

There are 0 best solutions below