Touch does not work after a few clicks.

[hotaryuzaki]

Description

i use RectButton or BaseButton and the touch does not work after a few clicks; sometimes it needs a lot of clicks, but sometimes not.
please see the video i attached

Screen_Recording_20230830_183246_Brambang.Dev.mp4

Steps to reproduce

<View
  key={`tab_${record.id}`}
  onLayout={event => {
    const layout = event.nativeEvent.layout;
    refLayout.current = {
      ...refLayout.current,
      [record.id]: [
        layout.x,
        layout.y,
        layout.width,
        layout.height
      ]
    };
  }}
>
    <RectButton
      onPress={() => {
        setTab(record);
        setAnimate(record.id);
      }}
    >
      <View
        style={{
          ...styles.tabBox,
          ...tab.id === record.id &&
            {
              borderBottomColor: Colors.corporateColorRed,
            },
        }}
      >
        <OpenSansMedium
          style={{
            ...styles.tabTitle,
            ...tab.id === record.id &&
              {
                color: Colors.corporateColorRed,
              },
          }}
        >
          {record.name}
        </OpenSansMedium>
      </View>
    </RectButton>
</View>

Snack or a link to a repository

no

Gesture Handler version

2.9.0

React Native version

0.71.4

Platforms

Android

JavaScript runtime

V8

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[j-piasecki]

Could you prepare a copy-pastable reproduction or post a link to a repository where the issue is happening?

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[hotaryuzaki]

Could you prepare a copy-pastable reproduction or post a link to a repository where the issue is happening?

i create a new project but i cannot reproduces the issue, so maybe it relates to other libraries

[hotaryuzaki]

Could you prepare a copy-pastable reproduction or post a link to a repository where the issue is happening?

i think i solved the issue, but i'm still not sure of the source of the issue.
but from my analysis that issue relates to update state, memo function, and ripple animation, that makes RectButton not well re-render.

so here is my function component for Tab before fixing:

  const TabOrders = memo(() => {
    let render = [];
    const status = [
      { id: 1, name: "Semua", status: "all" },
      { id: 2, name: "Pesanan Baru", status: "new" },
      { id: 3, name: "Siap Dikirim", status: "ready" },
      { id: 4, name: "Sedang Dikirim", status: "shipping" },
      { id: 5, name: "Dikomplain", status: "complain" },
      { id: 6, name: "Selesai", status: "complete" },
      { id: 7, name: "Dibatalkan", status: "cancel" }
    ];

    status.map((record) => {
      render.push(
        <View
          key={`tab_${record.id}`}
          onLayout={event => {
            const layout = event.nativeEvent.layout;
            refLayout.current = {
              ...refLayout.current,
              [record.id]: [
                layout.x,
                layout.y,
                layout.width,
                layout.height
              ]
            };
          }}
        >
          <RectButton
            onPress={() => {
              setTab(record);
              setAnimate(record.id);
            }}
          >
            <View
              style={{
                ...styles.tabBox,
                ...tab.id === record.id &&
                  {
                    borderBottomColor: "red",
                  },
              }}
            >
              <Text
                style={{
                  ...styles.tabTitle,
                  ...tab.id === record.id &&
                    {
                      color: "red",
                    },
                }}
              >
                {record.name}
              </Text>
            </View>
          </RectButton>
        </View>
      );

    });

    return render;

  }, () => true);

onPress will update the states, and useEffect will handle the tab animation, set state for loading overlay, and hit an API to get the data.
what i do to fixing this issue is to change the memo with useCallback like here

  const TabOrders = useCallback(({ tabSelected }) => {
    let render = [];
    const status = [
      { id: 1, name: "Semua", status: "all" },
      { id: 2, name: "Pesanan Baru", status: "new" },
      { id: 3, name: "Siap Dikirim", status: "ready" },
      { id: 4, name: "Sedang Dikirim", status: "shipping" },
      { id: 5, name: "Dikomplain", status: "complain" },
      { id: 6, name: "Selesai", status: "complete" },
      { id: 7, name: "Dibatalkan", status: "cancel" }
    ];

    status.map((record) => {
      render.push(
        <View
          key={`tab_${record.id}`}
          onLayout={event => {
            const layout = event.nativeEvent.layout;
            refLayout.current = {
              ...refLayout.current,
              [record.id]: [
                layout.x,
                layout.y,
                layout.width,
                layout.height
              ]
            };
          }}
        >
          <RectButton
            onPress={() => {
              setTab(record);
              setAnimate(record.id);
            }}
          >
            <View
              style={{
                ...styles.tabBox,
                ...tabSelected.id === record.id &&
                  {
                    borderBottomColor: Colors.corporateColorRed,
                  },
              }}
            >
              <OpenSansMedium
                style={{
                  ...styles.tabTitle,
                  ...tabSelected.id === record.id &&
                    {
                      color: Colors.corporateColorRed,
                    },
                }}
              >
                {record.name}
              </OpenSansMedium>
            </View>
          </RectButton>
        </View>
      );

    });

    return render;

  }, []);

and i create a new project but still i cannot reproduce the issue, i installed react navigation and the same version of gesture handler.
so my analysis, is not just the memo but there is another that makes the issue occurred

[HeroBanana]

guess it is related to #2585

[m-bert]

I'm not sure if it is related to #2585. The problem there was the cancellation of RectButtons. You can of course check if this PR helps.

It would be great if you could prepare repro that we can copy-paste and check since provided code still contains things such as layoutRef, setAnimate and so on.