Migrate ExplanationModal to CenteredModalLayout

src/components/CenteredModalLayout.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import type {MouseEvent} from 'react';
+import type {DimensionValue} from 'react-native';
+import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import FocusTrapForScreen from './FocusTrap/FocusTrapForScreen';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+
+type CenteredModalLayoutProps = {
+    children: React.ReactNode;
+
+    /** Width of the inner card on wide layouts (defaults to featureTrainingModalWidth) */
+    width?: number;
+
+    /** Width of the inner card on wide layout */
+    height?: DimensionValue;
+
+    /** Called when the backdrop is pressed, before navigating back */
+    onBackdropPress?: () => void;
+};
+
+function CenteredModalLayout({children, width, height, onBackdropPress}: CenteredModalLayoutProps) {
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {translate} = useLocalize();
+
+    const handleInnerClick = (e: MouseEvent) => e.stopPropagation();
+
+    return (
+        <PressableWithoutFeedback
+            onPress={onBackdropPress}
+            style={[styles.flex1, styles.alignItemsCenter, styles.getCenteredModalOuterView(shouldUseNarrowLayout)]}
+            accessibilityLabel={translate('common.close')}
+            role={CONST.ROLE.BUTTON}
+            sentryLabel="CenteredModalLayout-backdrop"
+        >
+            <FocusTrapForScreen>
+                <View
+                    onStartShouldSetResponder={() => true}
+                    onClick={handleInnerClick}
+                    style={styles.getCenteredModalInnerView(shouldUseNarrowLayout, width, height)}
+                >
+                    {children}
+                </View>
+            </FocusTrapForScreen>
+        </PressableWithoutFeedback>
+    );
+}
+
+export default CenteredModalLayout;

src/components/ExplanationModalScreen.tsx

@@ -0,0 +1,61 @@
+import React, {useRef} from 'react';
+import {View} from 'react-native';
+import useBeforeRemove from '@hooks/useBeforeRemove';
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
+import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import isInLandscapeModeUtil from '@libs/isInLandscapeMode';
+import Navigation from '@libs/Navigation/Navigation';
+import {completeHybridAppOnboarding} from '@userActions/Welcome';
+import CONST from '@src/CONST';
+import CenteredModalLayout from './CenteredModalLayout';
+import FeatureTrainingContent from './FeatureTrainingContent';
+
+function ExplanationModalScreen() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {windowWidth, windowHeight} = useWindowDimensions();
+
+    // In landscape mode the content is rendered in a ScrollView which handles the bottom safe area padding itself
+    const isContentScrollable = isInLandscapeModeUtil(windowWidth, windowHeight);
+
+    const contentStyle = useBottomSafeSafeAreaPaddingStyle({
+        addBottomSafeAreaPadding: !isContentScrollable,
+        style: [shouldUseNarrowLayout && styles.pt2, !isContentScrollable && styles.pb5],
+    });
+
+    // Mark hybrid-app onboarding complete however this screen is dismissed.
+    const hasCompletedOnboarding = useRef(false);
+    useBeforeRemove(() => {
+        if (hasCompletedOnboarding.current) {
+            return;
+        }
+        hasCompletedOnboarding.current = true;
+        completeHybridAppOnboarding();
+    });
+
+    const handleClose = () => Navigation.goBack();
+
+    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, handleClose, {shouldBubble: false});
+
+    return (
+        <CenteredModalLayout onBackdropPress={handleClose}>
+            <View style={contentStyle}>
+                <FeatureTrainingContent
+                    title={translate('onboarding.explanationModal.title')}
+                    description={translate('onboarding.explanationModal.description')}
+                    secondaryDescription={translate('onboarding.explanationModal.secondaryDescription')}
+                    confirmText={translate('footer.getStarted')}
+                    videoURL={CONST.WELCOME_VIDEO_URL}
+                    onClose={handleClose}
+                />
+            </View>
+        </CenteredModalLayout>
+    );
+}
+
+export default ExplanationModalScreen;