From 6085f7c4135eb8beed6aa68d07b9ef9728db8abb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Mon, 26 May 2025 18:38:59 +0200 Subject: [PATCH 1/6] fix-modal-not-moving-when-keyboard-opens --- src/components/FeatureTrainingModal.tsx | 1 - src/components/Modal/BaseModal.tsx | 4 +- .../BottomDockedModal/Container/index.web.tsx | 37 ++++++++++++------- 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx index b8559c208fe9..f35c620d2521 100644 --- a/src/components/FeatureTrainingModal.tsx +++ b/src/components/FeatureTrainingModal.tsx @@ -343,7 +343,6 @@ function FeatureTrainingModal({ return ( ; } @@ -82,7 +82,6 @@ function BaseModal( shouldPreventScrollOnFocus = false, enableEdgeToEdgeBottomSafeAreaPadding, shouldApplySidePanelOffset = type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED, - id, }: BaseModalProps, ref: React.ForwardedRef, ) { @@ -308,7 +307,6 @@ function BaseModal( avoidKeyboard={avoidKeyboard} customBackdrop={shouldUseCustomBackdrop ? : undefined} type={type} - id={id} > { - const FadeIn = new Keyframe({ - from: {opacity: 0}, - to: { - opacity: 1, - easing, - }, - }); + useEffect(() => { + if (isInitiated.get()) { + return; + } + isInitiated.set(true); + opacity.set( + withTiming(1, {duration: animationInTiming}, () => { + 'worklet'; + + runOnJS(onOpenCallBack)(); + }), + ); + }, [animationInTiming, onOpenCallBack, opacity, isInitiated]); + + const animatedStyles = useAnimatedStyle(() => { + 'worklet'; - return FadeIn.duration(animationInTiming).withCallback(onOpenCallBack); - }, [animationInTiming, onOpenCallBack]); + return {opacity: opacity.get()}; + }, [opacity]); const Exiting = useMemo(() => { const FadeOut = new Keyframe({ @@ -35,9 +45,8 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on return ( From 478c85ac0be0f47fe9bd03a61d427fef5ae5478d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Tue, 27 May 2025 13:21:41 +0200 Subject: [PATCH 2/6] remove redundant worklet usage --- .../BottomDockedModal/Container/index.web.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/components/Modal/BottomDockedModal/Container/index.web.tsx b/src/components/Modal/BottomDockedModal/Container/index.web.tsx index ee0fed410d5e..38cd7587cf6b 100644 --- a/src/components/Modal/BottomDockedModal/Container/index.web.tsx +++ b/src/components/Modal/BottomDockedModal/Container/index.web.tsx @@ -1,5 +1,5 @@ import React, {useEffect, useMemo} from 'react'; -import Animated, {Easing, Keyframe, runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; +import Animated, {Easing, Keyframe, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import type ModalProps from '@components/Modal/BottomDockedModal/types'; import type {ContainerProps} from '@components/Modal/BottomDockedModal/types'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -16,20 +16,10 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on return; } isInitiated.set(true); - opacity.set( - withTiming(1, {duration: animationInTiming}, () => { - 'worklet'; - - runOnJS(onOpenCallBack)(); - }), - ); + opacity.set(withTiming(1, {duration: animationInTiming}, onOpenCallBack)); }, [animationInTiming, onOpenCallBack, opacity, isInitiated]); - const animatedStyles = useAnimatedStyle(() => { - 'worklet'; - - return {opacity: opacity.get()}; - }, [opacity]); + const animatedStyles = useAnimatedStyle(() => ({opacity: opacity.get()}), [opacity]); const Exiting = useMemo(() => { const FadeOut = new Keyframe({ From 002051a94b07204a4ead1f792459effa78004bb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Tue, 27 May 2025 13:27:20 +0200 Subject: [PATCH 3/6] add easing --- src/components/Modal/BottomDockedModal/Container/index.web.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Modal/BottomDockedModal/Container/index.web.tsx b/src/components/Modal/BottomDockedModal/Container/index.web.tsx index 38cd7587cf6b..9591753c409e 100644 --- a/src/components/Modal/BottomDockedModal/Container/index.web.tsx +++ b/src/components/Modal/BottomDockedModal/Container/index.web.tsx @@ -16,7 +16,7 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on return; } isInitiated.set(true); - opacity.set(withTiming(1, {duration: animationInTiming}, onOpenCallBack)); + opacity.set(withTiming(1, {duration: animationInTiming, easing}, onOpenCallBack)); }, [animationInTiming, onOpenCallBack, opacity, isInitiated]); const animatedStyles = useAnimatedStyle(() => ({opacity: opacity.get()}), [opacity]); From 3af4374ac952d3a6975157a7f0847f0aaa7d5721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Thu, 29 May 2025 10:23:53 +0200 Subject: [PATCH 4/6] fix prettier --- src/components/Modal/BottomDockedModal/Container/index.web.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Modal/BottomDockedModal/Container/index.web.tsx b/src/components/Modal/BottomDockedModal/Container/index.web.tsx index f382d4834328..6a04310d3275 100644 --- a/src/components/Modal/BottomDockedModal/Container/index.web.tsx +++ b/src/components/Modal/BottomDockedModal/Container/index.web.tsx @@ -16,7 +16,6 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on onCloseCallbackRef.current = onCloseCallBack; }, [onCloseCallBack]); - useEffect(() => { if (isInitiated.get()) { return; From 3551afbf1d313a7fefb3afceb289e1729581cccd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Thu, 29 May 2025 11:51:20 +0200 Subject: [PATCH 5/6] fix animation issue for training modal on android and ios native --- src/components/Modal/BottomDockedModal/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Modal/BottomDockedModal/index.tsx b/src/components/Modal/BottomDockedModal/index.tsx index 1968a10ca53e..ec7c9a5c1a13 100644 --- a/src/components/Modal/BottomDockedModal/index.tsx +++ b/src/components/Modal/BottomDockedModal/index.tsx @@ -1,11 +1,12 @@ import noop from 'lodash/noop'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {NativeEventSubscription, ViewStyle} from 'react-native'; -import {BackHandler, Dimensions, InteractionManager, KeyboardAvoidingView, Modal, View} from 'react-native'; +import {BackHandler, Dimensions, InteractionManager, Modal, View} from 'react-native'; import {LayoutAnimationConfig} from 'react-native-reanimated'; import useThemeStyles from '@hooks/useThemeStyles'; import getPlatform from '@libs/getPlatform'; import CONST from '@src/CONST'; +import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import Backdrop from './Backdrop'; import Container from './Container'; import type ModalProps from './types'; From 8f51ee8cace837067fd39c9cfc3d526244a8bd7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Tue, 3 Jun 2025 15:44:49 +0200 Subject: [PATCH 6/6] fix prettier --- 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 ec7c9a5c1a13..27d16d12abc6 100644 --- a/src/components/Modal/BottomDockedModal/index.tsx +++ b/src/components/Modal/BottomDockedModal/index.tsx @@ -3,10 +3,10 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {NativeEventSubscription, ViewStyle} from 'react-native'; import {BackHandler, 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'; -import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import Backdrop from './Backdrop'; import Container from './Container'; import type ModalProps from './types';