HELP NEEDED: Bottom Sheet related to Android freezing.

[moxen-dev]

Hello everyone,

First of all, @gorhom, great work on this lib, it looks great. I already implemented with success in several parts of an app I'm building. The examples in the documentation, with great usage of React hooks, display the seriousness related to performance. Kudos.

This great first impression also makes me think that the issue I am having is not a bug but maybe a misusage from my part. So I decided to open a discussion first. It is important to say at least, that the app was working while having ActionSheet from Native Base (but it re-renders too much).

The Issue

Screenrecorder-2023-03-21-10-45-26-634.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.

• The app is wrapped into the GestureHandlerRootView;

Other approaches tried that also froze the app

• Close the modal and open another;
• Close the modal and open Action Sheet from native base;
• Change the buttons to be Touchables provided by either BottomSheet and RNGH;
• Remove the entire form and just leave a Touchable aforementioned;
• Wrap the Modal content with <NativeViewGestureHandler disallowInterruption>;
• Remove the clock and an Animated.Text to try to avoid conflicts;

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",

• "react-native-reanimated/plugin" is the last plugin listed on the babel.config.js;

[moxen-dev]

Just an update. I remove this bottom sheet I created my own also using React Native Gesture Handler. Same issue. So It is not, as I was predicting a bug here but some weird conflict happened in the app.

[juliovillalvazo]

@moxen-dev did you find out what was causing the problem?