[v4] BottomSheetContainerComponent fails to set containerOffset on app reopen after backButton dismiss

[jahglow]

Bug

When an app is dismissed via back button and is not cleared from recently opened apps and relaunched again by clicking an app shortcut, it FCs with an error "TypeError: Cannot add new property 'value'" in BottomSheetContainer.js. It appears that the containerOffset by the time it reopens is not a sharedValue, but a default object INITIAL_CONTAINER_OFFSET because useReactiveShearedValue.ts@46 returns it as is in the first ever render cycle:

// in BottomSheet.tsx @181
    const animatedContainerOffset = useReactiveSharedValue(
      _providedContainerOffset ?? INITIAL_CONTAINER_OFFSET
    ) as Animated.SharedValue<Insets>;

when it comes to being added a value in BottomSheetContainer>handleContainerLayout it has the following shape :

So react throws error for trying to mutate it:

TypeError: Cannot add new property 'value'

The solution would be to validate it's a SharedValue before trying to set it or change the mechanism of useReactiveSharedValue. And please do avoid casting as it's masking a problem.

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.5
react-native	0.71.2
react-native-reanimated	2.14.4
react-native-gesture-handler	2.6.2

Steps To Reproduce

1. Open the non-expo (not tested with expo) app that uses a BottomSheetModal, let it load
2. Dismiss the app with Android back button (do not clear it from lately launched apps)
3. Reopen the app using its shortcut as in step 1.

Describe what you expected to happen:

1. The app reopens and force closes

Fix

components/bottomSheetContainer/BottomSheetContainer.tsx:

  const handleContainerLayout = useCallback(
    function handleContainerLayout({
      nativeEvent: {
        layout: { height },
      },
    }: LayoutChangeEvent) {
      containerHeight.value = height;

      containerRef.current?.measure(
        (_x, _y, _width, _height, _pageX, pageY) => {
+          if(!containerOffset.value) return;
          containerOffset.value = {
            top: pageY,
            left: 0,
            right: 0,
            bottom: Math.max(
              0,
              WINDOW_HEIGHT - (pageY + height + (StatusBar.currentHeight ?? 0))
            ),
          };
        }
      );

      print({
        component: BottomSheetContainer.displayName,
        method: 'handleContainerLayout',
        params: {
          height,
        },
      });
    },
    [containerHeight, containerOffset, containerRef]
  );

patch-package patch

diff --git a/node_modules/@gorhom/bottom-sheet/lib/commonjs/components/bottomSheetContainer/BottomSheetContainer.js b/node_modules/@gorhom/bottom-sheet/lib/commonjs/components/bottomSheetContainer/BottomSheetContainer.js
index 25d20ac..0e91332 100644
--- a/node_modules/@gorhom/bottom-sheet/lib/commonjs/components/bottomSheetContainer/BottomSheetContainer.js
+++ b/node_modules/@gorhom/bottom-sheet/lib/commonjs/components/bottomSheetContainer/BottomSheetContainer.js
@@ -50,7 +50,7 @@ function BottomSheetContainerComponent({
     containerHeight.value = height;
     (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.measure((_x, _y, _width, _height, _pageX, pageY) => {
       var _StatusBar$currentHei;
-
+      if(!containerOffset?.value)return;
       containerOffset.value = {
         top: pageY,
         left: 0,

Reproducible sample code

none

[github-actions]

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]

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

[sregg]

This fix worked for us too

[VictorPulzz]

@gorhom can you add this fix please?

[SofianeDjellouli]

Fix worked, please add it to the project.

[MoritzCooks]

Same here. Worked with that fix. 👍
@gorhom please reopen issue.