refactor fullscreen modal for native

Author: jmusial

src/components/Modal/BaseModal.tsx

@@ -26,19 +26,24 @@ import CONST from '@src/CONST';
 import ModalContent from './ModalContent';
 import ModalContext from './ModalContext';
 import ReanimatedModal from './ReanimatedModal';
-import type ModalProps from './ReanimatedModal/types';
+import type ReanimatedModalProps from './ReanimatedModal/types';
 import type BaseModalProps from './types';
 
 const REANIMATED_MODAL_TYPES: Array<ValueOf<typeof CONST.MODAL.MODAL_TYPE>> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN];
 
-type ModalComponentProps = (ReactNativeModalProps | ModalProps) & {
+type ModalComponentProps = (ReactNativeModalProps | ReanimatedModalProps) & {
     type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
 };
 
 function ModalComponent({type, ...props}: ModalComponentProps) {
     if (type && REANIMATED_MODAL_TYPES.includes(type)) {
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        return <ReanimatedModal {...(props as ModalProps)} />;
+        return (
+            <ReanimatedModal
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(props as ReanimatedModalProps)}
+                type={type}
+            />
+        );
     }
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <ReactNativeModal {...(props as ReactNativeModalProps)} />;

src/components/Modal/ReanimatedModal/Container/index.tsx

@@ -1,13 +1,14 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import Animated, {Easing, Keyframe, runOnJS} from 'react-native-reanimated';
-import type ModalProps from '@components/Modal/ReanimatedModal/types';
+import type ReanimatedModalProps from '@components/Modal/ReanimatedModal/types';
 import type {ContainerProps} from '@components/Modal/ReanimatedModal/types';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 
 const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();
 
-function Container({style, animationInTiming = 300, animationOutTiming = 300, onCloseCallBack, onOpenCallBack, ...props}: Partial<ModalProps> & ContainerProps) {
+function Container({style, animationInTiming = 300, animationOutTiming = 300, onCloseCallBack, onOpenCallBack, type, ...props}: Partial<ReanimatedModalProps> & ContainerProps) {
     const styles = useThemeStyles();
 
     const Entering = useMemo(() => {
@@ -49,7 +50,7 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on
             {...props}
         >
             <Animated.View
-                style={[style, styles.modalAnimatedContainer]}
+                style={[styles.modalAnimatedContainer, type !== CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED && styles.flex1]}
                 entering={Entering}
                 exiting={Exiting}
             >

src/components/Modal/ReanimatedModal/Container/index.web.tsx

@@ -1,12 +1,12 @@
 import React, {useEffect, useMemo, useRef} from 'react';
 import Animated, {Easing, Keyframe, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
-import type ModalProps from '@components/Modal/ReanimatedModal/types';
+import type ReanimatedModalProps from '@components/Modal/ReanimatedModal/types';
 import type {ContainerProps} from '@components/Modal/ReanimatedModal/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();
 
-function Container({style, animationInTiming = 300, animationOutTiming = 300, onOpenCallBack, onCloseCallBack, ...props}: ModalProps & ContainerProps) {
+function Container({style, animationInTiming = 300, animationOutTiming = 300, onOpenCallBack, onCloseCallBack, ...props}: ReanimatedModalProps & ContainerProps) {
     const styles = useThemeStyles();
     const onCloseCallbackRef = useRef(onCloseCallBack);
     const opacity = useSharedValue(0);

src/components/Modal/ReanimatedModal/index.tsx

@@ -9,7 +9,7 @@ import getPlatform from '@libs/getPlatform';
 import CONST from '@src/CONST';
 import Backdrop from './Backdrop';
 import Container from './Container';
-import type ModalProps from './types';
+import type ReanimatedModalProps from './types';
 
 function ReanimatedModal({
     testID,
@@ -32,9 +32,10 @@ function ReanimatedModal({
     onBackdropPress = noop,
     onBackButtonPress = noop,
     style,
+    type,
     statusBarTranslucent = false,
     ...props
-}: ModalProps) {
+}: ReanimatedModalProps) {
     const [isVisibleState, setIsVisibleState] = useState(isVisible);
     const [isContainerOpen, setIsContainerOpen] = useState(false);
     const [isTransitioning, setIsTransitioning] = useState(false);
@@ -141,6 +142,7 @@ function ReanimatedModal({
             onOpenCallBack={onOpenCallBack}
             onCloseCallBack={onCloseCallBack}
             style={style}
+            type={type}
         >
             {children}
         </Container>

src/components/Modal/ReanimatedModal/types.ts

@@ -3,6 +3,7 @@ import type {NativeSyntheticEvent, StyleProp, ViewProps, ViewStyle} from 'react-
 import type {ModalProps as ReactNativeModalProps} from 'react-native-modal';
 import type {SharedValue} from 'react-native-reanimated';
 import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
 
 type GestureProps = {
     /** Height of the device (used for positioning) */
@@ -14,7 +15,7 @@ type GestureProps = {
 
 type AnimationOut = ValueOf<Pick<ReactNativeModalProps, 'animationOut'>>;
 
-type ModalProps = ViewProps &
+type ReanimatedModalProps = ViewProps &
     GestureProps & {
         /** Content inside the modal */
         children: ReactNode;
@@ -115,6 +116,9 @@ type ModalProps = ViewProps &
         supportedOrientations?: Array<'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right'>;
 
         navigationBarTranslucent?: boolean;
+
+        /** Modal type */
+        type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
     };
 
 type BackdropProps = {
@@ -154,5 +158,5 @@ type ContainerProps = {
     panPosition?: {translateX: SharedValue<number>; translateY: SharedValue<number>};
 };
 
-export default ModalProps;
+export default ReanimatedModalProps;
 export type {BackdropProps, ContainerProps, AnimationOut};