Fix: Onboarding modal opens partially at the beginning

Author: nyomanjyotisa

src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx

@@ -8,6 +8,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {isMobileSafari} from '@libs/Browser';
 import GoogleTagManager from '@libs/GoogleTagManager';
 import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
 import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -28,18 +29,9 @@ import OnboardingWorkspaces from '@pages/OnboardingWorkspaces';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
+import useCustomScreenOptions from '../useCustomScreenOptions';
 import Overlay from './Overlay';
 
-const defaultScreenOptions: PlatformStackNavigationOptions = {
-    headerShown: false,
-    web: {
-        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-        cardStyle: {
-            height: '100%',
-        },
-    },
-};
-
 const Stack = createPlatformStackNavigator<OnboardingModalNavigatorParamList>();
 
 function OnboardingModalNavigator() {
@@ -50,6 +42,7 @@ function OnboardingModalNavigator() {
     const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED, {canBeMissing: true});
     const [onboardingPolicyID] = useOnyx(ONYXKEYS.ONBOARDING_POLICY_ID, {canBeMissing: true});
     const isOnPrivateDomainAndHasAccessiblePolicies = !account?.isFromPublicDomain && account?.hasAccessibleDomainPolicies;
+    const customScreenOptions = useCustomScreenOptions();
 
     let initialRouteName: ValueOf<typeof SCREENS.ONBOARDING> = SCREENS.ONBOARDING.PURPOSE;
 
@@ -91,6 +84,23 @@ function OnboardingModalNavigator() {
         return null;
     }
 
+    const defaultScreenOptions: PlatformStackNavigationOptions = {
+        headerShown: false,
+        web: isMobileSafari()
+            ? {
+                  ...customScreenOptions.web,
+                  cardStyle: {
+                      height: '100%',
+                  },
+              }
+            : {
+                  cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+                  cardStyle: {
+                      height: '100%',
+                  },
+              },
+    };
+
     return (
         <NoDropZone>
             <Overlay />