diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx index f20e3dc7c..cd6ea6bfb 100644 --- a/src/components/bottomSheet/BottomSheet.tsx +++ b/src/components/bottomSheet/BottomSheet.tsx @@ -21,6 +21,8 @@ import Animated, { useWorkletCallback, WithSpringConfig, WithTimingConfig, + // @ts-expect-error Module '"react-native-reanimated"' has no exported member 'ReduceMotion' + ReduceMotion, } from 'react-native-reanimated'; import { State } from 'react-native-gesture-handler'; import { @@ -77,7 +79,7 @@ import { DEFAULT_DYNAMIC_SIZING, DEFAULT_ACCESSIBLE, DEFAULT_ACCESSIBILITY_LABEL, - DEFAULT_ACCESSIBILITY_ROLE + DEFAULT_ACCESSIBILITY_ROLE, } from './constants'; import type { BottomSheetMethods, Insets } from '../../types'; import type { BottomSheetProps, AnimateToPositionType } from './types'; @@ -98,8 +100,7 @@ const BottomSheetComponent = forwardRef( //#region extract props const { // animations configurations - animationConfigs: _providedAnimationConfigs, - + animationConfigs, // configurations index: _providedIndex = 0, snapPoints: _providedSnapPoints, @@ -172,6 +173,21 @@ const BottomSheetComponent = forwardRef( } = props; //#endregion + //#region animations configurations + const _providedAnimationConfigs = useMemo(() => { + if (!animationConfigs) { + return undefined; + } + + if (ReduceMotion) { + // @ts-expect-error Property 'reduceMotion' does not exist on type 'WithSpringConfig | WithTimingConfig'. + animationConfigs.reduceMotion = ReduceMotion.Never; + } + + return animationConfigs; + }, [animationConfigs]); + //#endregion + //#region layout variables /** * This variable is consider an internal variable, @@ -722,6 +738,10 @@ const BottomSheetComponent = forwardRef( * force animation configs from parameters, if provided */ if (configs !== undefined) { + if (ReduceMotion) { + // @ts-expect-error Property 'reduceMotion' does not exist on type 'WithSpringConfig | WithTimingConfig'. + configs.reduceMotion = ReduceMotion.Never; + } animatedPosition.value = animate({ point: position, configs, diff --git a/src/constants.ts b/src/constants.ts index cc8fb9f71..e8780b675 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,5 +1,6 @@ import { Dimensions, Platform } from 'react-native'; -import Animated, { Easing } from 'react-native-reanimated'; +// @ts-expect-error Module '"react-native-reanimated"' has no exported member 'ReduceMotion' +import Animated, { Easing, ReduceMotion } from 'react-native-reanimated'; const { height: WINDOW_HEIGHT, width: WINDOW_WIDTH } = Dimensions.get('window'); const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('screen'); @@ -72,11 +73,13 @@ const ANIMATION_CONFIGS_IOS = { overshootClamping: true, restDisplacementThreshold: 10, restSpeedThreshold: 10, + ...(ReduceMotion ? { reduceMotion: ReduceMotion.Never } : {}), }; const ANIMATION_CONFIGS_ANDROID = { duration: ANIMATION_DURATION, easing: ANIMATION_EASING, + ...(ReduceMotion ? { reduceMotion: ReduceMotion.Never } : {}), }; const ANIMATION_CONFIGS = diff --git a/src/utilities/animate.ts b/src/utilities/animate.ts index 81fec5b00..0ce4c9a50 100644 --- a/src/utilities/animate.ts +++ b/src/utilities/animate.ts @@ -4,8 +4,6 @@ import { withTiming, withSpring, AnimationCallback, - // @ts-ignore - ReduceMotion, } from 'react-native-reanimated'; import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants'; @@ -28,14 +26,6 @@ export const animate = ({ configs = ANIMATION_CONFIGS; } - // Users might have an accessibililty setting to reduce motion turned on. - // This prevents the animation from running when presenting the sheet, which results in - // the bottom sheet not even appearing so we need to override it to ensure the animation runs. - if (ReduceMotion) { - // @ts-ignore - configs.reduceMotion = ReduceMotion.Never; - } - // detect animation type const type = 'duration' in configs || 'easing' in configs