Skip to content

Commit

Permalink
fix: fixed the mount animation with reduce motion enabled (gorhom#1560,
Browse files Browse the repository at this point in the history
gorhom#1674)

fix: bottom sheet not appearing for users that have reduced motion turned on (gorhom#1743)(by @fobos531)
  • Loading branch information
gorhom authored and yayvery committed Mar 18, 2024
1 parent ed75bb7 commit fc1a76f
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 34 deletions.
32 changes: 11 additions & 21 deletions src/components/bottomSheet/BottomSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -740,26 +740,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
runOnJS(handleOnAnimate)(position, source, animatedSnapPoints.value);

/**
* force animation configs from parameters, if provided
* start animation
*/
if (configs !== undefined) {
animatedPosition.value = animate({
point: position,
configs,
velocity,
onComplete: animateToPositionCompleted,
});
} else {
/**
* use animationConfigs callback, if provided
*/
animatedPosition.value = animate({
point: position,
velocity,
configs: _providedAnimationConfigs,
onComplete: animateToPositionCompleted,
});
}
animatedPosition.value = animate({
point: position,
configs: configs || _providedAnimationConfigs,
velocity,
onComplete: animateToPositionCompleted,
});
},
[handleOnAnimate, _providedAnimationConfigs]
);
Expand Down Expand Up @@ -1313,7 +1301,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
return;
}

let nextPosition;
let nextPosition: number;
if (_providedIndex === -1) {
nextPosition = animatedClosedPosition.value;
animatedNextPositionIndex.value = -1;
Expand Down Expand Up @@ -1346,7 +1334,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
}

if (animateOnMount) {
animateToPosition(nextPosition, ANIMATION_SOURCE.MOUNT);
requestAnimationFrame(() => {
animateToPosition(nextPosition, ANIMATION_SOURCE.MOUNT);
});
} else {
animatedPosition.value = nextPosition;
}
Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useBottomSheetSpringConfigs.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useMemo } from 'react';
import type { WithSpringConfig } from 'react-native-reanimated';

/**
Expand All @@ -8,5 +7,5 @@ import type { WithSpringConfig } from 'react-native-reanimated';
export const useBottomSheetSpringConfigs = (
configs: Omit<WithSpringConfig, 'velocity'>
) => {
return useMemo(() => configs, [configs]);
return configs;
};
17 changes: 6 additions & 11 deletions src/hooks/useBottomSheetTimingConfigs.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
import { useMemo } from 'react';
import type { EasingFunction } from 'react-native';
import type { EasingFunctionFactory } from 'react-native-reanimated';
import type { WithTimingConfig } from 'react-native-reanimated';
import { ANIMATION_DURATION, ANIMATION_EASING } from '../constants';

interface TimingConfig {
duration?: number;
easing?: EasingFunction | EasingFunctionFactory;
}

/**
* Generate timing animation configs.
* @default
* - easing: Easing.out(Easing.exp)
* - duration 250
* - duration: 250
* @param configs overridable configs.
*/
export const useBottomSheetTimingConfigs = (configs: TimingConfig) => {
export const useBottomSheetTimingConfigs = (configs: WithTimingConfig) => {
return useMemo(() => {
const _configs: TimingConfig = {
const _configs: WithTimingConfig = {
easing: configs.easing || ANIMATION_EASING,
duration: configs.duration || ANIMATION_DURATION,
reduceMotion: configs.reduceMotion,
};

return _configs;
}, [configs.duration, configs.easing]);
}, [configs.duration, configs.easing, configs.reduceMotion]);
};
6 changes: 6 additions & 0 deletions src/utilities/animate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
withTiming,
withSpring,
AnimationCallback,
ReduceMotion,
} from 'react-native-reanimated';
import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';

Expand All @@ -26,6 +27,11 @@ 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.
configs.reduceMotion = ReduceMotion.Never;

// detect animation type
const type =
'duration' in configs || 'easing' in configs
Expand Down

0 comments on commit fc1a76f

Please sign in to comment.