[go: nahoru, domu]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: assigning to read-only property 'reduceMotion' #1848

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+27 −14
Open

fix: assigning to read-only property 'reduceMotion' #1848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions src/components/bottomSheet/BottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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';
Expand All @@ -98,8 +100,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
//#region extract props
const {
// animations configurations
animationConfigs: _providedAnimationConfigs,

animationConfigs,
// configurations
index: _providedIndex = 0,
snapPoints: _providedSnapPoints,
Expand Down Expand Up @@ -172,6 +173,21 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
} = 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,
Expand Down Expand Up @@ -722,6 +738,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
* 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,
Expand Down
5 changes: 4 additions & 1 deletion src/constants.ts
View file
Open in desktop
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,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 =
Expand Down
10 changes: 0 additions & 10 deletions src/utilities/animate.ts
View file
Open in desktop
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