GestureDetector is not responsive

[rezkiy37]

Description

The app uses GestureDetector to handle a tap on the send button. GestureDetector works properly when the user opens a chat screen. However, if the user opens nested chats (threads), returns to the 1st one, and taps on the send button, GestureDetector does not react to this action. The expected behavior is to have the button responsive.

Note: the bug is replicated for a case when there are 2 nested screens e.g. Main chat -> Subchat -> Subchat.

There is an issue with the Expensify app - Expensify/App#41528.

Video

Bug6469224_1714674407897.RPReplay_Final1714674254.mp4

Looks like at some moment GestureDetector loses a "connection" for the initial screen send button.

I've tried to do a force update for GestureDetector via setting and updating a key when the screen is focused, and it helps. So it requires a rerender of GestureDetector to refresh the "connection" and handle tap events.

Details

Steps to reproduce

1. Launch the "New Expensify" app on IOS.
2. Click on "+".
3. Start a chat with someone.
4. Open the chat.
5. Click on "+" on the left of the input.
6. Click "Submit expense".
7. Submit this expense.
8. Submit one more expense.
9. Click on the newly created expense preview in the chat.
10. Click on any expense preview.
11. Go back to the main chat.
12. Enter any message.
13. Click on the send button on the right of the input.
14. Current behavior: the send button is not responsive. Expected behavior: the message is sent.

Snack or a link to a repository

https://github.com/Expensify/App

Gesture Handler version

2.14.1

React Native version

0.73.4

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 15 Pro Max (IOS 17.5)

Acknowledgements

Yes

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

[rezkiy37]

I've attached the link - https://github.com/Expensify/App.

[j-piasecki]

I spent some time looking into this and I managed to track it down to be caused by react-freeze (so essentially by Suspense).

This is enough to reproduce the issue:

import {useState} from 'react';
import {Freeze} from 'react-freeze';
import {View, Button, SafeAreaView} from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

export default function FirstScreen() {
  const [frozen, setFrozen] = useState(false);
  const tap = Gesture.Tap().onStart(() => {
    console.log('Tap');
  });

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <SafeAreaView style={{flex: 1, backgroundColor: 'red'}}>
        <Button title="Unfreeze" onPress={() => setFrozen(false)} />
        <Freeze freeze={frozen}>
          <View>
            <GestureDetector gesture={tap}>
              <View
                style={{width: 100, height: 100, backgroundColor: 'blue'}}
              />
            </GestureDetector>
            <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
            <Button title="Freeze" onPress={() => setFrozen(true)} />
          </View>
        </Freeze>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

It's only reproducible on iOS, because Android keeps hidden views mounted (at the moment of writing): https://github.com/facebook/react-native/blob/9dfcb9ec3ae6987a3231e4d6dd2bf8fb557440c8/packages/react-native/ReactCommon/react/renderer/mounting/Differentiator.cpp#L217-L223

I will come back to it next week, after App.js conf.

[rezkiy37]

Thank you guys! I am going to test it as well 🙂

[rezkiy37]

Btw, when can we expect the next release?

[j-piasecki]

Btw, when can we expect the next release?

Next week at the earliest.