Skip to content

Commit

Permalink
fix: bottom sheet not appearing for users that have reduced motion tu…
Browse files Browse the repository at this point in the history
…rned on (#1743)(by @fobos531)
  • Loading branch information
gorhom committed May 19, 2024
1 parent 9034ae8 commit ab1cce2
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions src/utilities/animate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
withTiming,
withSpring,
AnimationCallback,
// @ts-ignore
ReduceMotion,
} from 'react-native-reanimated';
import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';

Expand All @@ -26,6 +28,14 @@ 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
Expand Down

1 comment on commit ab1cce2

@mihaibulic2
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two things:

  • this doesn't actually work properly (if a rerender happens during dismissal, the bottom sheet jitters and appears again; eg call setSomeState right when you call dismiss on your modal ref)
  • this approach causes a crash: "TypeError: Cannot assign to read-only property 'reduceMotion'" (on Android)

Please sign in to comment.