(BSR) fix(venueMap): filters modal presentation

__mocks__/@react-navigation/stack.tsx

@@ -7,3 +7,6 @@ const Navigator: React.FC<PropsWithChildren> = ({ children }) => {
 const Screen = () => null
 
 export const createStackNavigator = () => ({ Navigator, Screen })
+
+export const TransitionPresets = {}
+export const TransitionSpecs = { TransitionIOSSpec: { config: {} } }

src/features/navigation/RootNavigator/RootNavigator.tsx

@@ -8,7 +8,6 @@ import { useAuthContext } from 'features/auth/context/AuthContext'
 import { PrivacyPolicy } from 'features/cookies/pages/PrivacyPolicy'
 import { useCurrentRoute } from 'features/navigation/helpers/useCurrentRoute'
 import { AccessibleTabBar } from 'features/navigation/RootNavigator/Header/AccessibleTabBar'
-import { ROOT_NAVIGATOR_SCREEN_OPTIONS } from 'features/navigation/RootNavigator/navigationOptions'
 import { RootScreenNames } from 'features/navigation/RootNavigator/types'
 import { useInitialScreen } from 'features/navigation/RootNavigator/useInitialScreenConfig'
 import { withWebWrapper } from 'features/navigation/RootNavigator/withWebWrapper'
@@ -22,33 +21,39 @@ import { LoadingPage } from 'ui/components/LoadingPage'
 import { QuickAccess } from 'ui/web/link/QuickAccess'
 
 import { determineAccessibilityRole } from './determineAccessibilityRole'
+import { FILTERS_MODAL_NAV_OPTIONS } from './filtersModalNavOptions'
 import { Header } from './Header/Header'
+import { ROOT_NAVIGATOR_SCREEN_OPTIONS } from './navigationOptions'
 import { RootScreens } from './screens'
 import { RootStack } from './Stack'
 
+const isWeb = Platform.OS === 'web'
+
 const RootStackNavigator = withWebWrapper(
   ({ initialRouteName }: { initialRouteName: RootScreenNames }) => {
     const { top } = useSafeAreaInsets()
-
     return (
       <IconFactoryProvider>
         <RootStack.Navigator
           initialRouteName={initialRouteName}
           screenOptions={ROOT_NAVIGATOR_SCREEN_OPTIONS}>
+          {isWeb ? null : (
+            <RootStack.Screen
+              name="VenueMapFiltersStackNavigator"
+              component={VenueMapFiltersStackNavigator}
+              options={{
+                presentation: 'modal',
+                ...FILTERS_MODAL_NAV_OPTIONS,
+                cardStyle: {
+                  marginTop: top,
+                  borderTopLeftRadius: 20,
+                  borderTopRightRadius: 20,
+                },
+              }}
+            />
+          )}
+
           {RootScreens}
-          <RootStack.Screen
-            name="VenueMapFiltersStackNavigator"
-            component={VenueMapFiltersStackNavigator}
-            options={{
-              presentation: 'modal',
-              cardStyle:
-                Platform.OS === 'android'
-                  ? {
-                      marginTop: top,
-                    }
-                  : undefined,
-            }}
-          />
         </RootStack.Navigator>
       </IconFactoryProvider>
     )

src/features/navigation/RootNavigator/filtersModalNavOptions.ts

@@ -0,0 +1,34 @@
+import { StackNavigationOptions, TransitionPresets, TransitionSpecs } from '@react-navigation/stack'
+
+export const FILTERS_MODAL_NAV_OPTIONS: StackNavigationOptions = {
+  ...TransitionPresets.ModalSlideFromBottomIOS,
+  cardOverlayEnabled: true,
+  transitionSpec: {
+    open: {
+      animation: 'spring',
+      config: { ...TransitionSpecs.TransitionIOSSpec.config, mass: 2, damping: 83 },
+    },
+    close: { ...TransitionSpecs.BottomSheetSlideOutSpec },
+  },
+  cardStyleInterpolator: ({ current, layouts }) => ({
+    overlayStyle: {
+      backgroundColor: 'black',
+      opacity: current.progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.7],
+        extrapolate: 'clamp',
+      }),
+    },
+    cardStyle: {
+      transform: [
+        {
+          translateY: current.progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [layouts.screen.height, 0],
+            extrapolate: 'clamp',
+          }),
+        },
+      ],
+    },
+  }),
+}

src/features/navigation/VenueMapFiltersStackNavigator/VenueMapFiltersStackNavigator.tsx

@@ -1,10 +1,18 @@
-import React from 'react'
+import { useFocusEffect } from '@react-navigation/native'
+import React, { useCallback } from 'react'
+import { StatusBar } from 'react-native'
 
 import { VenueMapFiltersStack } from 'features/navigation/VenueMapFiltersStackNavigator/VenueMapFiltersStack'
 import { VenueMapFiltersList } from 'features/venueMap/components/VenueMapFiltersList/VenueMapFiltersList'
 import { VenueMapTypeFilter } from 'features/venueMap/components/VenueMapTypeFilter/VenueMapTypeFilter'
 
 export const VenueMapFiltersStackNavigator = () => {
+  useFocusEffect(
+    useCallback(() => {
+      const stackEntry = StatusBar.pushStackEntry({ barStyle: 'light-content', animated: true })
+      return () => StatusBar.popStackEntry(stackEntry)
+    }, [])
+  )
   return (
     <VenueMapFiltersStack.Navigator
       screenOptions={{

src/features/search/components/SearchCustomModalHeader.tsx

@@ -3,7 +3,6 @@ import { useTheme } from 'styled-components'
 import styled from 'styled-components/native'
 
 import { AccessibilityRole } from 'libs/accessibilityRole/accessibilityRole'
-import { useWhiteStatusBar } from 'libs/hooks/useWhiteStatusBar'
 import { styledButton } from 'ui/components/buttons/styledButton'
 import { BackButton } from 'ui/components/headers/BackButton'
 import { CloseButton } from 'ui/components/headers/CloseButton'
@@ -29,8 +28,6 @@ export const SearchCustomModalHeader: React.FC<Props> = ({
   shouldDisplayCloseButton,
   onClose,
 }) => {
-  useWhiteStatusBar()
-
   const { top } = useCustomSafeInsets()
   const { isDesktopViewport } = useTheme()
   const headerHeight = getSpacing(18) + (isDesktopViewport ? top : 0)

src/ui/components/modals/AppModal.tsx

@@ -4,6 +4,7 @@ import {
   Platform,
   ScrollView,
   ScrollViewProps,
+  StatusBar,
   useWindowDimensions,
   ViewProps,
 } from 'react-native'
@@ -213,6 +214,16 @@ export const AppModal: FunctionComponent<Props> = ({
     setFullscreenScrollViewRef,
   ])
 
+  /*   useFocusEffect(
+    useCallback(() => {
+      if (visible) {
+        StatusBar.setBarStyle('light-content')
+      } else {
+        StatusBar.setBarStyle('dark-content')
+      }
+    }, [visible])
+  ) */
+
   return (
     <StyledModal
       accessibilityModal
@@ -231,6 +242,7 @@ export const AppModal: FunctionComponent<Props> = ({
       onSwipeComplete={onSwipe}
       swipeDirection={swipeDirection}
       propagateSwipe={propagateSwipe}>
+      <StatusBar barStyle="light-content" translucent />
       <ModalContainer
         height={maxHeight ? undefined : modalContainerHeight}
         testID="modalContainer"