From ee29cf106ba7500b80a1df9553ee3e2831ac2b07 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 10 Feb 2025 15:58:18 +0100 Subject: [PATCH 01/13] feat: enable new bottom modal in emoji picker --- src/components/EmojiPicker/EmojiPicker.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPicker.tsx b/src/components/EmojiPicker/EmojiPicker.tsx index 79af5bc0a4f2..722f8e283b11 100644 --- a/src/components/EmojiPicker/EmojiPicker.tsx +++ b/src/components/EmojiPicker/EmojiPicker.tsx @@ -201,8 +201,6 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef From a6bd34fd2b7d88a4fbe83a657876b29f34273cdc Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 11 Feb 2025 10:58:40 +0100 Subject: [PATCH 02/13] fix: eslint problems --- src/components/EmojiPicker/EmojiPicker.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPicker.tsx b/src/components/EmojiPicker/EmojiPicker.tsx index 722f8e283b11..5712c8d450e7 100644 --- a/src/components/EmojiPicker/EmojiPicker.tsx +++ b/src/components/EmojiPicker/EmojiPicker.tsx @@ -12,9 +12,9 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import type {AnchorOrigin, EmojiPickerRef, EmojiPopoverAnchor, OnEmojiSelected, OnModalHideValue, OnWillShowPicker} from '@libs/actions/EmojiPickerAction'; -import * as Browser from '@libs/Browser'; +import {isMobileChrome} from '@libs/Browser'; import calculateAnchorPosition from '@libs/calculateAnchorPosition'; -import * as Modal from '@userActions/Modal'; +import {close} from '@userActions/Modal'; import CONST from '@src/CONST'; import EmojiPickerMenu from './EmojiPickerMenu'; @@ -92,7 +92,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef { - Modal.close(() => { + close(() => { onWillShow?.(); setIsEmojiPickerVisible(true); setEmojiPopoverAnchorPosition({ @@ -194,7 +194,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef Date: Tue, 11 Feb 2025 12:00:52 +0100 Subject: [PATCH 03/13] fix: LayoutAnimationConfig mock --- jest/setup.ts | 1 + src/components/Modal/BottomDockedModal/index.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/jest/setup.ts b/jest/setup.ts index 1e4dff5a9199..75b8dae48b6c 100644 --- a/jest/setup.ts +++ b/jest/setup.ts @@ -72,6 +72,7 @@ jest.mock('react-native-reanimated', () => ({ ...jest.requireActual('react-native-reanimated/mock'), createAnimatedPropAdapter: jest.fn, useReducedMotion: jest.fn, + LayoutAnimationConfig: jest.fn, })); jest.mock('react-native-keyboard-controller', () => require('react-native-keyboard-controller/jest')); diff --git a/src/components/Modal/BottomDockedModal/index.tsx b/src/components/Modal/BottomDockedModal/index.tsx index a699b865b2ca..e0a0d9abec1b 100644 --- a/src/components/Modal/BottomDockedModal/index.tsx +++ b/src/components/Modal/BottomDockedModal/index.tsx @@ -222,4 +222,5 @@ function BottomDockedModal({ ); } +BottomDockedModal.displayName = 'BottomDockedModal'; export default BottomDockedModal; From ab9f94c99720c348875d6b9727a9f424f8a8b30c Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 2 Apr 2025 14:56:46 +0200 Subject: [PATCH 04/13] Remove unnecessary comment and prop --- src/components/EmojiPicker/EmojiPicker.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPicker.tsx b/src/components/EmojiPicker/EmojiPicker.tsx index 5712c8d450e7..51ae120d80bf 100644 --- a/src/components/EmojiPicker/EmojiPicker.tsx +++ b/src/components/EmojiPicker/EmojiPicker.tsx @@ -190,8 +190,6 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef Date: Wed, 2 Apr 2025 14:57:08 +0200 Subject: [PATCH 05/13] Use KeyboardAvoidingView from our codebase --- .../Modal/BottomDockedModal/index.tsx | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/Modal/BottomDockedModal/index.tsx b/src/components/Modal/BottomDockedModal/index.tsx index 44eca06d2b5c..5397b98e7642 100644 --- a/src/components/Modal/BottomDockedModal/index.tsx +++ b/src/components/Modal/BottomDockedModal/index.tsx @@ -1,8 +1,9 @@ import noop from 'lodash/noop'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {NativeEventSubscription, ViewStyle} from 'react-native'; -import {BackHandler, DeviceEventEmitter, Dimensions, InteractionManager, KeyboardAvoidingView, Modal, View} from 'react-native'; +import {BackHandler, DeviceEventEmitter, Dimensions, InteractionManager, Modal, View} from 'react-native'; import {LayoutAnimationConfig} from 'react-native-reanimated'; +import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import useThemeStyles from '@hooks/useThemeStyles'; import getPlatform from '@libs/getPlatform'; import CONST from '@src/CONST'; @@ -215,18 +216,13 @@ function BottomDockedModal({ {...props} > {isVisibleState && hasBackdrop && backdropView} - - {avoidKeyboard ? ( - - {isVisibleState && containerView} - - ) : ( - isVisibleState && containerView - )} + + {isVisibleState && containerView} + ); From 306594732a905d7f55de413919893dd1bfdab5aa Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 2 Apr 2025 14:58:03 +0200 Subject: [PATCH 06/13] Add background color --- src/styles/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/index.ts b/src/styles/index.ts index 76b717142dba..789d6f986399 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1910,6 +1910,7 @@ const styles = (theme: ThemeColors) => popoverInnerContainer: { paddingTop: 0, // adjusting this because the mobile modal adds additional padding that we don't need for our layout maxHeight: '95%', + backgroundColor: theme.modalBackground, }, menuItemTextContainer: { From 897f8c0ea308a9feb24650aefa9aececc66c0046 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 2 Apr 2025 15:01:14 +0200 Subject: [PATCH 07/13] Remove maxHeight restriction from popoverInnerContainer style --- src/styles/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 789d6f986399..59fbb1e04d79 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1909,7 +1909,6 @@ const styles = (theme: ThemeColors) => popoverInnerContainer: { paddingTop: 0, // adjusting this because the mobile modal adds additional padding that we don't need for our layout - maxHeight: '95%', backgroundColor: theme.modalBackground, }, From 9a649924af22ae712c2def6fc5cc2c1793147b7c Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 3 Apr 2025 11:16:18 +0200 Subject: [PATCH 08/13] Fix keyboard avoiding view on mobile web --- src/components/Modal/BottomDockedModal/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Modal/BottomDockedModal/index.tsx b/src/components/Modal/BottomDockedModal/index.tsx index 5397b98e7642..7b3877138050 100644 --- a/src/components/Modal/BottomDockedModal/index.tsx +++ b/src/components/Modal/BottomDockedModal/index.tsx @@ -220,6 +220,7 @@ function BottomDockedModal({ behavior="padding" pointerEvents="box-none" enabled={avoidKeyboard} + style={[styles.flex1, styles.justifyContentEnd]} > {isVisibleState && containerView} From eaf519140b4d0d9003465054f5ffab822f50322c Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 3 Apr 2025 15:20:02 +0200 Subject: [PATCH 09/13] Refactor getModalPaddingStyles and keyboard context --- src/components/Modal/BaseModal.tsx | 59 +++++++++---------- .../PopoverWithoutOverlay/index.tsx | 33 +---------- src/components/withKeyboardState.tsx | 17 +++++- src/styles/utils/index.ts | 30 +++------- 4 files changed, 55 insertions(+), 84 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 6ead97c563c6..ae0f5e6a79fa 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -2,6 +2,7 @@ import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react' import {View} from 'react-native'; import type {ModalProps as ReactNativeModalProps} from 'react-native-modal'; import ReactNativeModal from 'react-native-modal'; +import Animated from 'react-native-reanimated'; import type {ValueOf} from 'type-fest'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal'; @@ -94,7 +95,7 @@ function BaseModal( const sidePaneStyle = shouldApplySidePaneOffset && !isSmallScreenWidth ? {paddingRight: sidePaneOffset.current} : undefined; const keyboardStateContextValue = useKeyboardState(); - const safeAreaInsets = useSafeAreaInsets(); + const insets = useSafeAreaInsets(); const isVisibleRef = useRef(isVisible); const hideModalCallbackRef = useRef<(callHideCallback: boolean) => void>(); @@ -211,34 +212,30 @@ function BaseModal( [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle], ); - const { - paddingTop: safeAreaPaddingTop, - paddingBottom: safeAreaPaddingBottom, - paddingLeft: safeAreaPaddingLeft, - paddingRight: safeAreaPaddingRight, - } = StyleUtils.getPlatformSafeAreaPadding(safeAreaInsets); - - const modalPaddingStyles = shouldUseModalPaddingStyle - ? StyleUtils.getModalPaddingStyles({ - safeAreaPaddingTop, - safeAreaPaddingBottom, - safeAreaPaddingLeft, - safeAreaPaddingRight, - shouldAddBottomSafeAreaMargin, - shouldAddTopSafeAreaMargin, - // enableEdgeToEdgeBottomSafeAreaPadding is used as a temporary solution to disable safe area bottom spacing on modals, to allow edge-to-edge content - shouldAddBottomSafeAreaPadding: !enableEdgeToEdgeBottomSafeAreaPadding && (!avoidKeyboard || !keyboardStateContextValue?.isKeyboardShown) && shouldAddBottomSafeAreaPadding, - shouldAddTopSafeAreaPadding, - modalContainerStyleMarginTop: modalContainerStyle.marginTop, - modalContainerStyleMarginBottom: modalContainerStyle.marginBottom, - modalContainerStylePaddingTop: modalContainerStyle.paddingTop, - modalContainerStylePaddingBottom: modalContainerStyle.paddingBottom, - insets: safeAreaInsets, - }) - : { - paddingLeft: safeAreaPaddingLeft ?? 0, - paddingRight: safeAreaPaddingRight ?? 0, - }; + const modalPaddingStyles = useMemo(() => { + const paddings = StyleUtils.getModalPaddingStyles({ + shouldAddBottomSafeAreaMargin, + shouldAddTopSafeAreaMargin, + // enableEdgeToEdgeBottomSafeAreaPadding is used as a temporary solution to disable safe area bottom spacing on modals, to allow edge-to-edge content + shouldAddBottomSafeAreaPadding: !enableEdgeToEdgeBottomSafeAreaPadding && (!avoidKeyboard || !keyboardStateContextValue.isKeyboardActive) && shouldAddBottomSafeAreaPadding, + shouldAddTopSafeAreaPadding, + modalContainerStyle, + insets, + }); + return shouldUseModalPaddingStyle ? paddings : {paddingLeft: paddings.paddingLeft, paddingRight: paddings.paddingRight}; + }, [ + StyleUtils, + avoidKeyboard, + enableEdgeToEdgeBottomSafeAreaPadding, + insets, + keyboardStateContextValue.isKeyboardActive, + modalContainerStyle, + shouldAddBottomSafeAreaMargin, + shouldAddBottomSafeAreaPadding, + shouldAddTopSafeAreaMargin, + shouldAddTopSafeAreaPadding, + shouldUseModalPaddingStyle, + ]); const modalContextValue = useMemo( () => ({ @@ -307,12 +304,12 @@ function BaseModal( initialFocus={initialFocus} shouldPreventScroll={shouldPreventScrollOnFocus} > - {children} - + {!keyboardStateContextValue?.isKeyboardShown && } diff --git a/src/components/PopoverWithoutOverlay/index.tsx b/src/components/PopoverWithoutOverlay/index.tsx index 5dfaddcab2df..b4c65e221c38 100644 --- a/src/components/PopoverWithoutOverlay/index.tsx +++ b/src/components/PopoverWithoutOverlay/index.tsx @@ -72,46 +72,17 @@ function PopoverWithoutOverlay( // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isVisible]); - const { - paddingTop: safeAreaPaddingTop, - paddingBottom: safeAreaPaddingBottom, - paddingLeft: safeAreaPaddingLeft, - paddingRight: safeAreaPaddingRight, - } = useMemo(() => StyleUtils.getPlatformSafeAreaPadding(insets), [StyleUtils, insets]); - const modalPaddingStyles = useMemo( () => StyleUtils.getModalPaddingStyles({ - safeAreaPaddingTop, - safeAreaPaddingBottom, - safeAreaPaddingLeft, - safeAreaPaddingRight, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaPadding, shouldAddTopSafeAreaPadding, - modalContainerStyleMarginTop: modalContainerStyle.marginTop, - modalContainerStyleMarginBottom: modalContainerStyle.marginBottom, - modalContainerStylePaddingTop: modalContainerStyle.paddingTop, - modalContainerStylePaddingBottom: modalContainerStyle.paddingBottom, + modalContainerStyle, insets, }), - [ - StyleUtils, - insets, - modalContainerStyle.marginBottom, - modalContainerStyle.marginTop, - modalContainerStyle.paddingBottom, - modalContainerStyle.paddingTop, - safeAreaPaddingBottom, - safeAreaPaddingLeft, - safeAreaPaddingRight, - safeAreaPaddingTop, - shouldAddBottomSafeAreaMargin, - shouldAddBottomSafeAreaPadding, - shouldAddTopSafeAreaMargin, - shouldAddTopSafeAreaPadding, - ], + [StyleUtils, insets, modalContainerStyle, shouldAddBottomSafeAreaMargin, shouldAddBottomSafeAreaPadding, shouldAddTopSafeAreaMargin, shouldAddTopSafeAreaPadding], ); if (!isVisible) { diff --git a/src/components/withKeyboardState.tsx b/src/components/withKeyboardState.tsx index 15150485d499..a35321929ff9 100755 --- a/src/components/withKeyboardState.tsx +++ b/src/components/withKeyboardState.tsx @@ -10,14 +10,19 @@ type KeyboardStateContextValue = { /** Whether the keyboard is open */ isKeyboardShown: boolean; + /** Whether the keyboard is animating or shown */ + isKeyboardActive: boolean; + /** Height of the keyboard in pixels */ keyboardHeight: number; + /** Ref to check if the keyboard is animating */ isKeyboardAnimatingRef: MutableRefObject; }; const KeyboardStateContext = createContext({ isKeyboardShown: false, + isKeyboardActive: false, keyboardHeight: 0, isKeyboardAnimatingRef: {current: false}, }); @@ -26,6 +31,7 @@ function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null { const {bottom} = useSafeAreaInsets(); const [keyboardHeight, setKeyboardHeight] = useState(0); const isKeyboardAnimatingRef = useRef(false); + const [isKeyboardActive, setIsKeyboardActive] = useState(false); useEffect(() => { const keyboardDidShowListener = KeyboardEvents.addListener('keyboardDidShow', (e) => { @@ -34,10 +40,18 @@ function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null { const keyboardDidHideListener = KeyboardEvents.addListener('keyboardDidHide', () => { setKeyboardHeight(0); }); + const keyboardWillShowListener = KeyboardEvents.addListener('keyboardWillShow', () => { + setIsKeyboardActive(true); + }); + const keyboardWillHideListener = KeyboardEvents.addListener('keyboardWillHide', () => { + setIsKeyboardActive(false); + }); return () => { keyboardDidShowListener.remove(); keyboardDidHideListener.remove(); + keyboardWillShowListener.remove(); + keyboardWillHideListener.remove(); }; }, [bottom]); @@ -66,8 +80,9 @@ function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null { keyboardHeight, isKeyboardShown: keyboardHeight !== 0, isKeyboardAnimatingRef, + isKeyboardActive, }), - [keyboardHeight], + [isKeyboardActive, keyboardHeight], ); return {children}; } diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 1d8faeb41cc7..fa8e1d9aa1eb 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -589,14 +589,7 @@ type ModalPaddingStylesParams = { shouldAddTopSafeAreaMargin: boolean; shouldAddBottomSafeAreaPadding: boolean; shouldAddTopSafeAreaPadding: boolean; - safeAreaPaddingTop: number; - safeAreaPaddingBottom: number; - safeAreaPaddingLeft: number; - safeAreaPaddingRight: number; - modalContainerStyleMarginTop: MarginPaddingValue; - modalContainerStyleMarginBottom: MarginPaddingValue; - modalContainerStylePaddingTop: MarginPaddingValue; - modalContainerStylePaddingBottom: MarginPaddingValue; + modalContainerStyle: ViewStyle; insets: EdgeInsets; }; @@ -605,24 +598,19 @@ function getModalPaddingStyles({ shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaPadding, shouldAddTopSafeAreaPadding, - safeAreaPaddingTop, - safeAreaPaddingBottom, - safeAreaPaddingLeft, - safeAreaPaddingRight, - modalContainerStyleMarginTop, - modalContainerStyleMarginBottom, - modalContainerStylePaddingTop, - modalContainerStylePaddingBottom, + modalContainerStyle, insets, }: ModalPaddingStylesParams): ViewStyle { + const {paddingTop: safeAreaPaddingTop, paddingBottom: safeAreaPaddingBottom, paddingLeft: safeAreaPaddingLeft, paddingRight: safeAreaPaddingRight} = getPlatformSafeAreaPadding(insets); + // use fallback value for safeAreaPaddingBottom to keep padding bottom consistent with padding top. // More info: issue #17376 - const safeAreaPaddingBottomWithFallback = insets.bottom === 0 && typeof modalContainerStylePaddingTop === 'number' ? modalContainerStylePaddingTop ?? 0 : safeAreaPaddingBottom; + const safeAreaPaddingBottomWithFallback = insets.bottom === 0 && typeof modalContainerStyle.paddingTop === 'number' ? modalContainerStyle.paddingTop ?? 0 : safeAreaPaddingBottom; return { - marginTop: getCombinedSpacing(modalContainerStyleMarginTop, safeAreaPaddingTop, shouldAddTopSafeAreaMargin), - marginBottom: getCombinedSpacing(modalContainerStyleMarginBottom, safeAreaPaddingBottomWithFallback, shouldAddBottomSafeAreaMargin), - paddingTop: getCombinedSpacing(modalContainerStylePaddingTop, safeAreaPaddingTop, shouldAddTopSafeAreaPadding), - paddingBottom: getCombinedSpacing(modalContainerStylePaddingBottom, safeAreaPaddingBottomWithFallback, shouldAddBottomSafeAreaPadding), + marginTop: getCombinedSpacing(modalContainerStyle.marginTop, safeAreaPaddingTop, shouldAddTopSafeAreaMargin), + marginBottom: getCombinedSpacing(modalContainerStyle.marginBottom, safeAreaPaddingBottomWithFallback, shouldAddBottomSafeAreaMargin), + paddingTop: getCombinedSpacing(modalContainerStyle.paddingTop, safeAreaPaddingTop, shouldAddTopSafeAreaPadding), + paddingBottom: getCombinedSpacing(modalContainerStyle.paddingBottom, safeAreaPaddingBottomWithFallback, shouldAddBottomSafeAreaPadding), paddingLeft: safeAreaPaddingLeft ?? 0, paddingRight: safeAreaPaddingRight ?? 0, }; From ea3cb909478b6932c93c8fffd2902c7da819b015 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 3 Apr 2025 18:33:19 +0200 Subject: [PATCH 10/13] Replace Animated.View with View in BaseModal component --- src/components/Modal/BaseModal.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index ae0f5e6a79fa..2b0b9371b248 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -2,7 +2,6 @@ import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react' import {View} from 'react-native'; import type {ModalProps as ReactNativeModalProps} from 'react-native-modal'; import ReactNativeModal from 'react-native-modal'; -import Animated from 'react-native-reanimated'; import type {ValueOf} from 'type-fest'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal'; @@ -304,12 +303,12 @@ function BaseModal( initialFocus={initialFocus} shouldPreventScroll={shouldPreventScrollOnFocus} > - {children} - + {!keyboardStateContextValue?.isKeyboardShown && } From bcc5485237062da46a6248ebb9f39ebcabef5213 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 4 Apr 2025 19:06:10 +0200 Subject: [PATCH 11/13] Bring back old code --- .../Modal/BottomDockedModal/index.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/Modal/BottomDockedModal/index.tsx b/src/components/Modal/BottomDockedModal/index.tsx index 7b3877138050..f0906f0f77af 100644 --- a/src/components/Modal/BottomDockedModal/index.tsx +++ b/src/components/Modal/BottomDockedModal/index.tsx @@ -1,9 +1,8 @@ import noop from 'lodash/noop'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {NativeEventSubscription, ViewStyle} from 'react-native'; -import {BackHandler, DeviceEventEmitter, Dimensions, InteractionManager, Modal, View} from 'react-native'; +import {BackHandler, DeviceEventEmitter, Dimensions, InteractionManager, KeyboardAvoidingView, Modal, View} from 'react-native'; import {LayoutAnimationConfig} from 'react-native-reanimated'; -import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import useThemeStyles from '@hooks/useThemeStyles'; import getPlatform from '@libs/getPlatform'; import CONST from '@src/CONST'; @@ -216,14 +215,17 @@ function BottomDockedModal({ {...props} > {isVisibleState && hasBackdrop && backdropView} - - {isVisibleState && containerView} - + {avoidKeyboard ? ( + + {isVisibleState && containerView} + + ) : ( + isVisibleState && containerView + )} ); From d5ef18e0c7a7b44fd6e30b080c644cc4aa634af1 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 4 Apr 2025 19:26:54 +0200 Subject: [PATCH 12/13] Fix ios warning --- src/components/Modal/BottomDockedModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Modal/BottomDockedModal/index.tsx b/src/components/Modal/BottomDockedModal/index.tsx index f0906f0f77af..362227283370 100644 --- a/src/components/Modal/BottomDockedModal/index.tsx +++ b/src/components/Modal/BottomDockedModal/index.tsx @@ -130,7 +130,7 @@ function BottomDockedModal({ width: deviceWidthProp ?? deviceWidth, height: deviceHeightProp ?? deviceHeight, backgroundColor: backdropColor, - opacity: getPlatform() === CONST.PLATFORM.WEB ? backdropOpacity : 1, + ...(getPlatform() === CONST.PLATFORM.WEB ? {opacity: backdropOpacity} : {}), }; }, [deviceHeightProp, deviceWidthProp, deviceWidth, deviceHeight, backdropColor, backdropOpacity]); From b12864fcf27b5ec3922817ad67d1e7903572c0ab Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 4 Apr 2025 19:35:05 +0200 Subject: [PATCH 13/13] Use padding on android too --- src/components/Modal/BottomDockedModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Modal/BottomDockedModal/index.tsx b/src/components/Modal/BottomDockedModal/index.tsx index 362227283370..f1cf0ef559e0 100644 --- a/src/components/Modal/BottomDockedModal/index.tsx +++ b/src/components/Modal/BottomDockedModal/index.tsx @@ -217,7 +217,7 @@ function BottomDockedModal({ {isVisibleState && hasBackdrop && backdropView} {avoidKeyboard ? (