[v4] | [v2] App crashing when refreshing because of Bottom Sheet IOS

[maydersonmellops]

Bug

App is closing on IOS when doing a full reload, when using Bottom Sheet, I tried several versions of Bottom Sheet and Reanimated but I get the same problem, with React Native version 0.71.7 and Reanimated 3.1.0 was working fine, but it no longer works in version 0.72.3 and newer versions of Reanimated.

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.7
react-native	0.72.3
react-native-reanimated	3.4.1
react-native-gesture-handler	2.12.1

Steps To Reproduce

1. Start a project with RN from scratch
2. Run app
3. Reload app

Describe what you expected to happen:

1. After fully reloading the app, the app does not crash.
2. Work with new React Native version

Reproducible sample code

import React, {useCallback, useMemo, useRef} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <View style={styles.container}>
        <BottomSheet
          ref={bottomSheetRef}
          index={1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}>
          <View style={styles.contentContainer}>
            <Text>Awesome 🎉</Text>
          </View>
        </BottomSheet>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

export default App;

[maydersonmellops]

https://github.com/gorhom/react-native-bottom-sheet/assets/129874730/c3775a9a-b836-405f-bd86-5d1c29e320a0

When run app on Xcode and apply fully reload:

[Sup3r-Us3r]

Same issue

@gorhom is there any solution for this?

[Gustavohsdp]

@gorhom same problem here

[DaniyarJakupov]

Crash also happens (ios only) when doing a codepush update in the production app since it reloads the app in order to apply a new bundle. Would be great to at least get a workaround or a patch cc @gorhom

[leymytel]

My workaround to the codepush/eas update issue is to unmount the whole React tree while updating.

I added a provider that wraps the whole app, and when the user taps on the "reload" banner I display the "Updating the app" screen.

    <OverTheAirUpdatesContext.Provider value={providerValue}>
      {isUpdating ? <Loading text="Updating the app" /> : children}
    </OverTheAirUpdatesContext.Provider>

[csasiyash]

For Codedpush reload issue, realm was responsible in my case. And the solution mentioned in the below issue, helped me fix the crash. microsoft/react-native-code-push#2179

[maydersonmellops]

For Codedpush reload issue, realm was responsible in my case. And the solution mentioned in the below issue, helped me fixed the crash. microsoft/react-native-code-push#2179

Yes, I applied that solution, but it is something temporary, because that treatment is very bad.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[Saad-Bashar]

Did anyone find anything? I tried to use https://github.com/software-mansion/react-native-reanimated/issues/4783#issuecomment-1713329472, but it did not work. The only place that I am using reanimated is with the bottom sheet.

[valeshgopal]

Facing same issue in android

[cnlkkrb]

I'm getting the same error. Is there any solution? When I refresh my application on the first page of the bottom sheet, it crashes.