diff --git a/src/components/Modal/ReanimatedModal/Container/index.tsx b/src/components/Modal/ReanimatedModal/Container/index.tsx index 3d944c8f534a..2e22d6fa8146 100644 --- a/src/components/Modal/ReanimatedModal/Container/index.tsx +++ b/src/components/Modal/ReanimatedModal/Container/index.tsx @@ -1,4 +1,4 @@ -import React, {useMemo} from 'react'; +import React, {useEffect, useMemo} from 'react'; import {View} from 'react-native'; import Animated, {Keyframe, runOnJS} from 'react-native-reanimated'; import type ReanimatedModalProps from '@components/Modal/ReanimatedModal/types'; @@ -27,12 +27,8 @@ function Container({ const Entering = useMemo(() => { const AnimationIn = new Keyframe(getModalInAnimation(animationIn)); - return AnimationIn.duration(animationInTiming).withCallback(() => { - 'worklet'; - - runOnJS(onOpenCallBack)(); - }); - }, [animationIn, animationInTiming, onOpenCallBack]); + return AnimationIn.duration(animationInTiming); + }, [animationIn, animationInTiming]); const Exiting = useMemo(() => { const AnimationOut = new Keyframe(getModalOutAnimation(animationOut)); @@ -44,6 +40,19 @@ function Container({ }); }, [animationOutTiming, onCloseCallBack, animationOut]); + // Temporary solution to run animation callbacks even with reduced motion setting turned on + // since .reduceMotion method doesn't work in the current version of Reanimated (https://github.com/software-mansion/react-native-reanimated/issues/8046) + // We will remove this once fixed upstream https://github.com/Expensify/App/issues/69190 + useEffect(() => { + setTimeout(onOpenCallBack, animationInTiming); + + return () => { + setTimeout(onCloseCallBack, animationOutTiming); + }; + // calling callbacks only when the layout animations are run - on mount and unmount + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + }, []); + return ( onCloseCallbackRef.current()) + // ensuring the callback is called even with reduced motion setting turned on .reduceMotion(ReduceMotion.Never), [animationOutTiming, animationOut], ); diff --git a/src/components/Modal/ReanimatedModal/index.tsx b/src/components/Modal/ReanimatedModal/index.tsx index 8646a0b82dda..d13b2d336e42 100644 --- a/src/components/Modal/ReanimatedModal/index.tsx +++ b/src/components/Modal/ReanimatedModal/index.tsx @@ -121,9 +121,10 @@ function ReanimatedModal({ // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [isVisible, isContainerOpen, isTransitioning]); - const backdropStyle: ViewStyle = useMemo(() => { - return {width: windowWidth, height: windowHeight, backgroundColor: backdropColor}; - }, [windowWidth, windowHeight, backdropColor]); + const backdropStyle: ViewStyle = useMemo( + () => ({width: windowWidth, height: windowHeight, backgroundColor: backdropColor, opacity: backdropOpacity}), + [windowWidth, windowHeight, backdropColor, backdropOpacity], + ); const onOpenCallBack = useCallback(() => { setIsTransitioning(false);