Fix bottom sheet zindex issues (#6453)

client/ios/Podfile.lock

@@ -2100,9 +2100,9 @@ PODS:
     - React-Core
   - react-native-idle-timer (2.2.3):
     - React-Core
-  - react-native-netinfo (11.3.2):
+  - react-native-netinfo (11.4.1):
     - React-Core
-  - react-native-safe-area-context (4.10.9):
+  - react-native-safe-area-context (4.14.0):
     - React-Core
   - react-native-volume-manager (1.10.0):
     - Mute
@@ -2368,7 +2368,7 @@ PODS:
     - React-Core
   - RNDateTimePicker (8.2.0):
     - React-Core
-  - RNDeviceInfo (11.1.0):
+  - RNDeviceInfo (14.0.2):
     - React-Core
   - RNFBApp (20.3.0):
     - Firebase/CoreOnly (= 10.29.0)
@@ -2391,7 +2391,7 @@ PODS:
     - Firebase/Storage (= 10.29.0)
     - React-Core
     - RNFBApp
-  - RNGestureHandler (2.20.0):
+  - RNGestureHandler (2.21.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2412,29 +2412,71 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNImageCropPicker (0.41.2):
+  - RNImageCropPicker (0.41.6):
     - React-Core
     - React-RCTImage
-    - RNImageCropPicker/QBImagePickerController (= 0.41.2)
+    - RNImageCropPicker/QBImagePickerController (= 0.41.6)
     - TOCropViewController (~> 2.7.4)
-  - RNImageCropPicker/QBImagePickerController (0.41.2):
+  - RNImageCropPicker/QBImagePickerController (0.41.6):
     - React-Core
     - React-RCTImage
     - TOCropViewController (~> 2.7.4)
   - RNLocalize (3.2.1):
     - React-Core
-  - RNNotifee (9.1.1):
+  - RNNotifee (9.1.3):
     - React-Core
-    - RNNotifee/NotifeeCore (= 9.1.1)
-  - RNNotifee/NotifeeCore (9.1.1):
+    - RNNotifee/NotifeeCore (= 9.1.3)
+  - RNNotifee/NotifeeCore (9.1.3):
     - React-Core
   - RNPermissions (4.1.5):
     - React-Core
   - RNRate (1.2.12):
     - React-Core
-  - RNReactNativeHapticFeedback (2.2.0):
+  - RNReactNativeHapticFeedback (2.3.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
     - React-Core
-  - RNReanimated (3.15.4):
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNReanimated (3.16.4):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated (= 3.16.4)
+    - RNReanimated/worklets (= 3.16.4)
+    - Yoga
+  - RNReanimated/reanimated (3.16.4):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2454,10 +2496,9 @@ PODS:
     - React-utils
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.15.4)
-    - RNReanimated/worklets (= 3.15.4)
+    - RNReanimated/reanimated/apple (= 3.16.4)
     - Yoga
-  - RNReanimated/reanimated (3.15.4):
+  - RNReanimated/reanimated/apple (3.16.4):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2478,7 +2519,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNReanimated/worklets (3.15.4):
+  - RNReanimated/worklets (3.16.4):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2499,7 +2540,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.34.0):
+  - RNScreens (4.4.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2974,8 +3015,8 @@ SPEC CHECKSUMS:
   react-native-daily-js: 6f3b0930d5fd7fc94648eb334a35d3efe538c93c
   react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
   react-native-idle-timer: b4e9ff189950bcd3ba03257d9f033f3432341db8
-  react-native-netinfo: 076df4f9b07f6670acf4ce9a75aac8d34c2e2ccc
-  react-native-safe-area-context: ab8f4a3d8180913bd78ae75dd599c94cce3d5e9a
+  react-native-netinfo: f0a9899081c185db1de5bb2fdc1c88c202a059ac
+  react-native-safe-area-context: 4532f1a0c5d34a46b9324ccaaedcb5582a302b7d
   react-native-volume-manager: 3c7d8047841b6831730dea7bf25250522388b4f4
   react-native-webrtc: f0863a670c08895cebfd74d7790e499397d5be1a
   react-native-webview: 91800ab1c604389120f4abe895328ff7736513fb
@@ -3007,21 +3048,21 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: ec53e44dc3e75b44aa2a9f37618a49c3bc080a7a
   RNCPicker: b7873ba797dc586bfaf3307d737cbdc620a9ff3e
   RNDateTimePicker: 40ffda97d071a98a10fdca4fa97e3977102ccd14
-  RNDeviceInfo: b899ce37a403a4dea52b7cb85e16e49c04a5b88e
+  RNDeviceInfo: 3f2e5fcca3637f75c6d30ba287293c2f97206781
   RNFBApp: 793adb33298db7e67dc365dc1ec0dc8a55a7a044
   RNFBAuth: e923d3f87088009ac8505140599ec1e784d77bd0
   RNFBDynamicLinks: 6e5d52576c079e65040110c8a9b895c6e1f02edc
   RNFBFirestore: 9b5e7d645787f02d5d16c4e060e778e9da762e02
   RNFBStorage: a86f59a4adae00b3061e55257d6c3d70851a1810
-  RNGestureHandler: 83fd202dbc0b8971414c5c7c56ddd9f5cde05911
-  RNImageCropPicker: 771e2ca319d2cf92e04ebf334ece892ee9a6728f
+  RNGestureHandler: 38b7949a58a56ae0e2a3c38920cb6852cafb6b9f
+  RNImageCropPicker: 8e39c01f205e00d739c31e682f068aac315587bf
   RNLocalize: 4f22418187ecd5ca693231093ff1d912d1b3c9bc
-  RNNotifee: 35b5f984d11083b02d7f2990b3408cd99a0aeeac
+  RNNotifee: 522276e0be010e98173175fb838514b69f18cbe0
   RNPermissions: a58e61bd4e6bd417adcf8ef8ca094b93d772e492
   RNRate: ef3bcff84f39bb1d1e41c5593d3eea4aab2bd73a
-  RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
-  RNReanimated: 4e3738c07d997c502b5fa407524700dfa8712777
-  RNScreens: db442e7b8c7bc8befec2ce057927305ff8598cc8
+  RNReactNativeHapticFeedback: dd1df8ab143dfd0ac79fe483cd08822d7a86fc85
+  RNReanimated: 13f9f061449dd7a1f6e1b8fb4caf18b880b41bd1
+  RNScreens: a582697173dfacb627c9366a80881ffb5dd92971
   RNSentry: d2f4b8dc672fb4e26b50b99e006e52d547e36b3f
   RNSVG: 8b1a777d54096b8c2a0fd38fc9d5a454332bbb4d
   Sentry: f8374b5415bc38dfb5645941b3ae31230fbeae57
@@ -3037,7 +3078,7 @@ SPEC CHECKSUMS:
   StripePaymentsUI: 7d7cffb2ecfc0d6b5ac3a4488c02893a5ff6cc77
   StripeUICore: bb102d453b1e1a10a37f810bc0a9aa0675fb17fd
   TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
-  Yoga: eed50599a85bd9f6882a9938d118aed6a397db9c
+  Yoga: bd92064a0d558be92786820514d74fc4dddd1233
 
 PODFILE CHECKSUM: 1e2c5c3ea8152bd7472ee44e381909c2f6afd170
 

client/metro.config.js

@@ -1,3 +1,6 @@
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
 const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 /**
  * Metro configuration for React Native
@@ -60,4 +63,6 @@ const config = {
   },
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = wrapWithReanimatedMetroConfig(
+  mergeConfig(getDefaultConfig(__dirname), config),
+);

client/package.json

@@ -24,7 +24,7 @@
     "@daily-co/react-native-daily-js": "0.69.0",
     "@daily-co/react-native-webrtc": "118.0.3-daily.1",
     "@dotlottie/react-player": "^1.6.19",
-    "@gorhom/bottom-sheet": "^4.6.4",
+    "@gorhom/bottom-sheet": "^5.0.6",
     "@kingstinct/react-native-healthkit": "^8.2.0",
     "@lottiefiles/react-lottie-player": "^3.5.4",
     "@notifee/react-native": "^9.1.3",
@@ -44,7 +44,7 @@
     "@react-navigation/stack": "^6.4.1",
     "@sentry/react-native": "^5.33.1",
     "@stripe/stripe-react-native": "^0.39.0",
-    "@th3rdwave/react-navigation-bottom-sheet": "^0.3.2",
+    "@th3rdwave/react-navigation-bottom-sheet": "https://github.com/29ki/react-navigation-bottom-sheet.git#overlay-as-containerComponent",
     "@types/lodash.throttle": "^4.1.9",
     "dayjs": "^1.11.13",
     "debug": "^4.3.6",
@@ -67,7 +67,7 @@
     "react-native-circular-progress": "^1.4.1",
     "react-native-code-push": "^9.0.0",
     "react-native-device-info": "^14.0.2",
-    "react-native-gesture-handler": "^2.20.0",
+    "react-native-gesture-handler": "^2.21.2",
     "react-native-get-random-values": "^1.11.0",
     "react-native-haptic-feedback": "^2.3.3",
     "react-native-idle-timer": "^2.2.3",
@@ -77,7 +77,7 @@
     "react-native-markdown-display": "^7.0.2",
     "react-native-permissions": "^4.1.5",
     "react-native-rate": "^1.2.12",
-    "react-native-reanimated": "^3.15.4",
+    "react-native-reanimated": "^3.16.4",
     "react-native-safe-area-context": "^4.14.0",
     "react-native-screens": "^4.4.0",
     "react-native-svg": "^15.8.0",

client/src/lib/components/ProfileInfo/ProfileInfo.tsx

@@ -11,7 +11,6 @@ import useUpdateProfileDetails from '../../user/hooks/useUpdateProfileDetails';
 import ProfilePicture from '../User/ProfilePicture';
 import useUser from '../../user/hooks/useUser';
 import {COLORS} from '../../../../../shared/src/constants/colors';
-import useHideModalUntilResolved from '../../navigation/hooks/useHideModalUntilResolved';
 
 const Container = styled.View({
   alignItems: 'center',
@@ -47,8 +46,6 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({onSaveCallback}) => {
     useChangeProfilePicture();
   const {updateProfileDetails, isUpdatingProfileDetails} =
     useUpdateProfileDetails();
-  const hideModalAndChangeProfilePicture =
-    useHideModalUntilResolved(changeProfilePicture);
   const [displayName, setDisplayName] = useState(user?.displayName ?? '');
   const [nameMissing, setNameMissing] = useState(false);
   const [pictureMissing, setPictureMissing] = useState(false);
@@ -97,7 +94,7 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({onSaveCallback}) => {
         pictureURL={user?.photoURL}
         hasError={pictureMissing}
         loading={isUpdatingProfilePicture}
-        onPress={hideModalAndChangeProfilePicture}
+        onPress={changeProfilePicture}
         size={SPACINGS.NINTYSIX}
       />
       <Spacer16 />

client/src/lib/navigation/ModalStack.tsx

@@ -1,4 +1,5 @@
-import React, {useMemo} from 'react';
+import React, {Fragment, useMemo} from 'react';
+
 import {
   BottomSheetNavigationOptions,
   createBottomSheetNavigator,
@@ -14,7 +15,10 @@ import SessionErrorModal from '../../routes/modals/SessionErrorModal/SessionErro
 import {COLORS} from '../../../../shared/src/constants/colors';
 import SETTINGS from '../constants/settings';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {BottomSheetBackdrop} from '@gorhom/bottom-sheet';
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
 import ChangeLanguageModal from '../../routes/modals/ChangeLanguageModal/ChangeLanguageModal';
 import ProfileSettingsModal from '../../routes/modals/ProfileSettingsModal/ProfileSettingsModal';
 import SignInModal from '../../routes/modals/SignInModal/SignInModal';
@@ -50,18 +54,25 @@ import UnlockCollectionModal from '../../routes/modals/UnlockCollectionModal/Unl
 const {Navigator, Screen, Group} =
   createBottomSheetNavigator<ModalStackProps>();
 
+const BackdropComponent = ({
+  animatedIndex,
+  animatedPosition,
+  style,
+}: BottomSheetBackdropProps) => (
+  <BottomSheetBackdrop
+    pressBehavior="close"
+    animatedIndex={animatedIndex}
+    animatedPosition={animatedPosition}
+    disappearsOnIndex={-0.1}
+    appearsOnIndex={0}
+    opacity={0.1}
+    style={style}
+  />
+);
+
 const modalScreenOptions: BottomSheetNavigationOptions = {
-  backdropComponent: ({animatedIndex, animatedPosition, style}) => (
-    <BottomSheetBackdrop
-      pressBehavior="close"
-      animatedIndex={animatedIndex}
-      animatedPosition={animatedPosition}
-      disappearsOnIndex={-0.1}
-      appearsOnIndex={0}
-      opacity={0.1}
-      style={style}
-    />
-  ),
+  containerComponent: Fragment,
+  backdropComponent: BackdropComponent,
   backgroundStyle: {
     backgroundColor: 'transparent',
     shadowColor: '#000000',
@@ -80,12 +91,13 @@ const modalScreenOptions: BottomSheetNavigationOptions = {
     left: 0,
     right: 0,
   },
+  enableDynamicSizing: false,
   /*
     TODO: Fixes issues with modals being clipped when focusing on input fields
     https://github.com/gorhom/react-native-bottom-sheet/issues/618
   */
   android_keyboardInputMode: 'adjustResize',
-  stackBehavior: 'replace',
+  stackBehavior: 'push',
 };
 
 const ModalStack = () => {

client/src/routes/modals/AssignNewHostModal/AssignNewHostModal.tsx

@@ -25,7 +25,6 @@ import {SPACINGS} from '../../../lib/constants/spacings';
 import {ModalHeading} from '../../../lib/components/Typography/Heading/Heading';
 import useConfirmSessionReminder from '../../../lib/sessions/hooks/useConfirmSessionReminder';
 import {getSessionHostingLink} from '../../../lib/sessions/api/session';
-import useHideModalUntilResolved from '../../../lib/navigation/hooks/useHideModalUntilResolved';
 
 const Row = styled(View)({
   flexDirection: 'row',
@@ -42,18 +41,17 @@ const AssignNewHostModal = () => {
 
   const exercise = useExerciseById(session?.exerciseId, session?.language);
   const confirmToggleReminder = useConfirmSessionReminder(session);
-  const hideModalAndShare = useHideModalUntilResolved(Share.share);
 
   const isHost = user?.uid === session.hostId;
 
   const onHostChange = useCallback(async () => {
     const link = await getSessionHostingLink(session.id);
     if (link) {
-      hideModalAndShare({
+      Share.share({
         message: link,
       });
     }
-  }, [session.id, hideModalAndShare]);
+  }, [session.id]);
 
   useEffect(() => {
     if (isHost) {