diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx index de803e60..9ea2c781 100644 --- a/src/components/bottomSheet/BottomSheet.tsx +++ b/src/components/bottomSheet/BottomSheet.tsx @@ -6,6 +6,7 @@ import React, { useEffect, useImperativeHandle, useMemo, + useState, } from 'react'; import { Platform, StyleSheet } from 'react-native'; import { State } from 'react-native-gesture-handler'; @@ -280,6 +281,13 @@ const BottomSheetComponent = forwardRef( ? userReduceMotionSetting : _providedOverrideReduceMotion === ReduceMotion.Always; }, [userReduceMotionSetting, _providedOverrideReduceMotion]); + + const [, _forceUpdate] = useState(0); + const handleReduceMotionMountFlush = useCallback(() => { + if (Platform.OS === 'android' && reduceMotion) { + _forceUpdate((prev: number) => prev + 1); + } + }, [reduceMotion]); //#endregion //#region state/dynamic variables @@ -971,7 +979,7 @@ const BottomSheetComponent = forwardRef( * if animate on mount is set to true, then we animate to the propose position, * else, we set the position with out animation. */ - if (animateOnMount) { + if (animateOnMount && !(Platform.OS === 'android' && reduceMotion)) { animateToPosition( proposedPosition, ANIMATION_SOURCE.MOUNT, @@ -981,6 +989,7 @@ const BottomSheetComponent = forwardRef( } else { setToPosition(proposedPosition); isAnimatedOnMount.value = true; + runOnJS(handleReduceMotionMountFlush)(); } return; } @@ -1071,6 +1080,7 @@ const BottomSheetComponent = forwardRef( isAnimatedOnMount, isInTemporaryPosition, isLayoutCalculated, + handleReduceMotionMountFlush, ] ); //#endregion