Skip to content

Commit

Permalink
fix: assigning to read-only property 'reduceMotion'
Browse files Browse the repository at this point in the history
You can't modify the object inside `worklet`:
software-mansion/react-native-reanimated#5430 (comment)
  • Loading branch information
pafry7 committed May 28, 2024
1 parent 4b2a739 commit de1dd99
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 11 deletions.
11 changes: 10 additions & 1 deletion src/constants.ts
Original file line number Diff line number Diff line change
@@ -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');
Expand Down Expand Up @@ -72,11 +73,19 @@ const ANIMATION_CONFIGS_IOS = {
overshootClamping: true,
restDisplacementThreshold: 10,
restSpeedThreshold: 10,
// Users might have an accessibility 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.
...(ReduceMotion ? { reduceMotion: ReduceMotion.Never } : {}),
};

const ANIMATION_CONFIGS_ANDROID = {
duration: ANIMATION_DURATION,
easing: ANIMATION_EASING,
// Users might have an accessibility 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.
...(ReduceMotion ? { reduceMotion: ReduceMotion.Never } : {}),
};

const ANIMATION_CONFIGS =
Expand Down
10 changes: 0 additions & 10 deletions src/utilities/animate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import {
withTiming,
withSpring,
AnimationCallback,
// @ts-ignore
ReduceMotion,
} from 'react-native-reanimated';
import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';

Expand All @@ -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
Expand Down

0 comments on commit de1dd99

Please sign in to comment.