[v5-alpha] Web - animatedIndex changes by itself and causes the BottomSheet to open up on navigating back to it

[5ZYSZ3K]

Hi! 👋

While testing out the web implementation in version 5.0.0-alpha.11, i run into an issue.
The problem is:
On web, when your BottomSheet did render, and then you navigated away from it, the _animatedContainerHeight property is set to 0. It causes animatedIndex variable to be 0 - and so, when you navigate back to the screen with the BottomSheet, it opens up immediately.

To reproduce the issue, you can clone and open up this repo: https://github.com/5ZYSZ3K/bottom-sheet-web-issue-demo
It's a simple expo app created with npx create-expo-app, with added BottomSheet to it. On web, navigate away from the screen with BottomSheet, and then back to it - it will pop up immediately

Here is the diff that solved my problem:

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 07cbe0a..6c23503 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
@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _constants = require("../../constants");
 var _utilities = require("../../utilities");
 var _styles = require("./styles");
+const { INITIAL_CONTAINER_HEIGHT } = require("../bottomSheet/constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function BottomSheetContainerComponent({
@@ -38,7 +39,7 @@ function BottomSheetContainerComponent({
       }
     }
   }) {
-    containerHeight.value = height;
+    containerHeight.value = height || INITIAL_CONTAINER_HEIGHT;
     containerRef.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
       if (!containerOffset.value) return;
       containerOffset.value = {
diff --git a/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetContainer/BottomSheetContainer.js b/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetContainer/BottomSheetContainer.js
index 26fcae4..5aaffaa 100644
--- a/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetContainer/BottomSheetContainer.js
+++ b/node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetContainer/BottomSheetContainer.js
@@ -3,6 +3,7 @@ import { StatusBar, View } from 'react-native';
 import { WINDOW_HEIGHT } from '../../constants';
 import { print } from '../../utilities';
 import { styles } from './styles';
+import { INITIAL_CONTAINER_HEIGHT } from '../bottomSheet/constants';
 function BottomSheetContainerComponent({
   containerHeight,
   containerOffset,
@@ -30,7 +31,7 @@ function BottomSheetContainerComponent({
       }
     }
   }) {
-    containerHeight.value = height;
+    containerHeight.value = height || INITIAL_CONTAINER_HEIGHT;
     containerRef.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
       if (!containerOffset.value) return;
       containerOffset.value = {
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
index abca0a5..893671a 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
@@ -10,6 +10,7 @@ import { WINDOW_HEIGHT } from '../../constants';
 import { print } from '../../utilities';
 import { styles } from './styles';
 import type { BottomSheetContainerProps } from './types';
+import { INITIAL_CONTAINER_HEIGHT } from '../bottomSheet/constants';
 
 function BottomSheetContainerComponent({
   containerHeight,
@@ -44,7 +45,7 @@ function BottomSheetContainerComponent({
         layout: { height },
       },
     }: LayoutChangeEvent) {
-      containerHeight.value = height;
+      containerHeight.value = height || INITIAL_CONTAINER_HEIGHT;
 
       containerRef.current?.measure(
         (_x, _y, _width, _height, _pageX, pageY) => {

This issue body was partially generated by patch-package.

[github-actions]

@5ZYSZ3K: hello! 👋

This issue is being automatically closed because it does not follow the issue template.