fix: extra padding bottom in bottom modal

Author: linhvovan29546

src/components/FeatureTrainingModal.tsx

@@ -23,7 +23,6 @@ import Lottie from './Lottie';
 import LottieAnimations from './LottieAnimations';
 import type DotLottieAnimation from './LottieAnimations/types';
 import Modal from './Modal';
-import SafeAreaConsumer from './SafeAreaConsumer';
 import Text from './Text';
 import VideoPlayer from './VideoPlayer';
 
@@ -311,8 +310,6 @@ function FeatureTrainingModal({
     useLayoutEffect(parseFSAttributes, []);
 
     return (
-        <SafeAreaConsumer>
-            {({safeAreaPaddingBottomStyle}) => (
                 <Modal
                     isVisible={isModalVisible}
                     type={onboardingIsMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
@@ -334,7 +331,7 @@ function FeatureTrainingModal({
                     shouldUseNewModal
                 >
                     <View
-                        style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && StyleUtils.getWidthStyle(width), safeAreaPaddingBottomStyle]}
+                        style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && StyleUtils.getWidthStyle(width)]}
                         fsClass={CONST.FULL_STORY.UNMASK}
                         testID={CONST.FULL_STORY.UNMASK}
                     >
@@ -377,8 +374,6 @@ function FeatureTrainingModal({
                         </View>
                     </View>
                 </Modal>
-            )}
-        </SafeAreaConsumer>
     );
 }
 

src/components/RequireTwoFactorAuthenticationModal.tsx

@@ -9,7 +9,6 @@ import Button from './Button';
 import Lottie from './Lottie';
 import LottieAnimations from './LottieAnimations';
 import Modal from './Modal';
-import SafeAreaConsumer from './SafeAreaConsumer';
 import Text from './Text';
 
 type RequireTwoFactorAuthenticationModalProps = {
@@ -39,8 +38,6 @@ function RequireTwoFactorAuthenticationModal({onCancel = () => {}, description,
     const StyleUtils = useStyleUtils();
 
     return (
-        <SafeAreaConsumer>
-            {({safeAreaPaddingBottomStyle}) => (
                 <Modal
                     onClose={onCancel}
                     isVisible={isVisible}
@@ -49,7 +46,7 @@ function RequireTwoFactorAuthenticationModal({onCancel = () => {}, description,
                     shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
                     shouldUseNewModal
                 >
-                    <View style={safeAreaPaddingBottomStyle}>
+                    <View >
                         <View style={[styles.cardSectionIllustration, styles.alignItemsCenter, StyleUtils.getBackgroundColorStyle(LottieAnimations.Safe.backgroundColor)]}>
                             <Lottie
                                 source={LottieAnimations.Safe}
@@ -74,8 +71,6 @@ function RequireTwoFactorAuthenticationModal({onCancel = () => {}, description,
                         </View>
                     </View>
                 </Modal>
-            )}
-        </SafeAreaConsumer>
     );
 }