Merge pull request Expensify#87579 from software-mansion-labs/@GCyganek/landscape-mode/onboarding-safe-area

Author: mjasikowski

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

@@ -34,6 +34,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import OnboardingModalNavigatorContentWrapper from './OnboardingModalNavigatorContentWrapper';
 import Overlay from './Overlay';
 
 const Stack = createPlatformStackNavigator<OnboardingModalNavigatorParamList>();
@@ -116,10 +117,7 @@ function OnboardingModalNavigator() {
                 style={styles.onboardingNavigatorOuterView}
             >
                 <FocusTrapForScreens>
-                    <View
-                        onClick={(e) => e.stopPropagation()}
-                        style={[styles.maxHeight100Percentage, styles.overflowHidden, styles.OnboardingNavigatorInnerView(onboardingIsMediumOrLargerScreenWidth)]}
-                    >
+                    <OnboardingModalNavigatorContentWrapper onboardingIsMediumOrLargerScreenWidth={onboardingIsMediumOrLargerScreenWidth}>
                         <Stack.Navigator
                             screenOptions={defaultScreenOptions}
                             initialRouteName={initialRouteName}
@@ -177,7 +175,7 @@ function OnboardingModalNavigator() {
                                 component={OnboardingWorkspaceInvite}
                             />
                         </Stack.Navigator>
-                    </View>
+                    </OnboardingModalNavigatorContentWrapper>
                 </FocusTrapForScreens>
             </View>
         </NoDropZone>

src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigatorContentWrapper/index.ios.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {View} from 'react-native';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type OnboardingModalNavigatorContentWrapperProps = {
+    /** Rendered child component */
+    children: React.ReactNode;
+
+    /** Whether the onboarding is on a medium or larger screen width */
+    onboardingIsMediumOrLargerScreenWidth: boolean;
+};
+
+function OnboardingModalNavigatorContentWrapper({children, onboardingIsMediumOrLargerScreenWidth}: OnboardingModalNavigatorContentWrapperProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const insets = useSafeAreaInsets();
+    const {paddingLeft, paddingRight} = StyleUtils.getPlatformSafeAreaPadding(insets);
+
+    // Add padding left and right to the style to account for the safe area insets
+    return (
+        <View
+            onClick={(e) => e.stopPropagation()}
+            style={[styles.maxHeight100Percentage, styles.overflowHidden, styles.OnboardingNavigatorInnerView(onboardingIsMediumOrLargerScreenWidth), {paddingLeft, paddingRight}]}
+        >
+            {children}
+        </View>
+    );
+}
+
+export default OnboardingModalNavigatorContentWrapper;

src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigatorContentWrapper/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type OnboardingModalNavigatorContentWrapperProps = {
+    /** Rendered child component */
+    children: React.ReactNode;
+
+    /** Whether the onboarding is on a medium or larger screen width */
+    onboardingIsMediumOrLargerScreenWidth: boolean;
+};
+
+function OnboardingModalNavigatorContentWrapper({children, onboardingIsMediumOrLargerScreenWidth}: OnboardingModalNavigatorContentWrapperProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <View
+            onClick={(e) => e.stopPropagation()}
+            style={[styles.maxHeight100Percentage, styles.overflowHidden, styles.OnboardingNavigatorInnerView(onboardingIsMediumOrLargerScreenWidth)]}
+        >
+            {children}
+        </View>
+    );
+}
+
+export default OnboardingModalNavigatorContentWrapper;