search

software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
5.82k stars 952 forks source link

Android freezing #2439

Closed moxen-dev closed 3 months ago

moxen-dev commented 1 year ago

Description

Hello everyone,

I am adding a bottom sheet to my app. First I was using Native Base Action Sheet and it was working fine. Then I changed in favor of the Gorhom Bottom Sheet and a but started to happen. After trying to find the root cause, I decided to completely remove the bottom sheet and coding on my self using react native gesture handler and reanimated. The same issue ocurred. So here I am reporting it/asking for help.

The Issue

https://user-images.githubusercontent.com/93292309/226666012-e3706cfc-a5cf-4cd4-8e27-aa5da54898ee.mp4

Sorry for the interface not being in english, it is tailored for another audience. I will try to be as descriptive as possible here though.

When the user joins the live streaming, there is an auction going on of a Foo Fights tee-shirt. You can see that the clock is ticking down. The products button present a BottomSheetModal with 2 products listed and after selecting one of them, the system change the modal content with a form asking inputs about starting price and time limit for buyers. When submitted, the system dismiss the modal and the app freezes.

Other approaches tried that also froze the app

Package.json

Between some libs, I believe these are the relevant ones to present here:

    "@gorhom/bottom-sheet": "^4",
    "expo": "~48.0.6",
    "expo-router": "^1.3.0",
    "react": "18.2.0",
    "react-native": "0.71.3",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-reanimated": "~2.14.4",

Steps to reproduce

I guess the video demonstrate what is happening.

Snack or a link to a repository

https://gist.github.com/moxen-dev/8808a943931f755dbd406a67e0d9a316

Gesture Handler version

2.9.0

React Native version

0.71.3

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

Real device

Device model

XIAOMI Redmi Note 11

Acknowledgements

Yes

github-actions[bot] commented 1 year ago

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?

j-piasecki commented 1 year ago

Could you prepare a repository with an app that would allow to easily reproduce the bug? The gist you've provided is sadly not copy-pasteable, and it seems you've already tried the things that first come to my mind.

talaikis commented 1 year ago

May be related, same lib versions, app freezes on file permissions modal with:

ReactNative ▶︎ [GESTURE HANDLER] Initialize gesture handler for root view com.facebook.react.views.modal.ReactModalHostView$DialogRootViewGroup{8422507 V.E...... ......ID 0,0-0,0}
garyi-inmanage commented 11 months ago

I was able reproduce this using RN built-in Modal. When modal closes and Im trying to call a function from a Pressable on a screen, here's my package.json:

    "@react-navigation/core": "6.4.8",
    "@react-navigation/drawer": "6.6.2",
    "@react-navigation/native": "6.1.6",
    "@react-navigation/native-stack": "6.1.0",
    "@react-navigation/stack": "6.3.16",
    "react-native-gesture-handler": "1.10.3",
    "react-native-reanimated": "3.1.0",

Here's the code:

// SomeModal.js
<Modal
            animationType='none'
            supportedOrientations={['portrait']}
            transparent
            visible
    >
    <GestureHandlerRootView  style={{flex: 1}}>
        // Some view here.
    </GestureHandlerRootView>
</Modal>

Updating to the lastest RNGestureHandler doesn't seem to fix it.

garyi-inmanage commented 9 months ago

Is it possible to nest multiple GestureHandlerRootView's? for example:

I have the following.

Here's the code:

// ModalManager.js
<Modal
            animationType='none'
            supportedOrientations={['portrait']}
            transparent
            visible
    >
    <GestureHandlerRootView  style={{flex: 1}}>
        // More modals here, rendered conditionally.
    </GestureHandlerRootView>
</Modal>
// App.js
<SomeProvider>
    <AppRouter style={styles.container}/>
     <GestureHandlerRootView>
         <ModalsManager />
    </GestureHandlerRootView>
</SomeProvider>

This works for a while until a few scenarios:

  1. You close the device using the power button (i.e goes to lock screen) and when I come back the ReactModalHostView$DialogRootViewGroup is being removed, without initializing the rootview again causing the app to "Hang" and unable to process touches.
  2. Close a modal with a swipe.
  3. Open the app, Leave it open for a few minutes try to interact, same result

currently im on RNGH 2.10.0.

It would be great for some advice in terms of a workaround or a some insight to why this is happening?

garyi-inmanage commented 8 months ago

@j-piasecki I've looked at some LogRocket replays of my app sessions, After the modal closes the ReactModalHostView/DialogRootViewGroup persists to be mounted so it gives the illusion of the app freezing, Even though the logcat logs:

[GESTURE HANDLER] Tearing down gesture handler registered for root view com.facebook.react.views.modal.ReactModalHostView$DialogRootViewGroup{bdc8e21 V.E...... .......D 0,0-1080,1215}

Could you point me to the file/function that handles that logic? Or give me some insight to why that would happened?

m-bert commented 3 months ago

Hi @moxen-dev and @garyi-inmanage! Could you please provide a copy-pastable reproduction? I've tried to make something similar to first snippet of @garyi-inmanage, but I didn't manage to reproduce this bug.

talaikis commented 3 months ago

Side note, I had freezes with 2.12.0 on Android 14, 2.14.0 seems solved that.