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

pafry7 · 2024-05-28T10:28:05Z

Motivation

Upgrading the package to version 4.6.3 results in the following error when rendering BottomSheet in the development.

ERROR  TypeError: Cannot assign to read-only property 'reduceMotion'

This error is located at:
    in AnimatedComponent(View)
    in Unknown (created by PanGestureHandler)
    in PanGestureHandler (created by BottomSheetDraggableViewComponent)
    in BottomSheetDraggableViewComponent (created by BottomSheet)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by BottomSheet)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by BottomSheet)
    in RCTView (created by View)
    in View (created by BottomSheetContainerComponent)
    in BottomSheetContainerComponent (created by BottomSheet)
    in BottomSheetGestureHandlersProvider (created by BottomSheet)
    in BottomSheet (created by BottomSheet)
    ...
    in AppContainer
    in main(RootComponent), js engine: hermes

Cause

Function animate inside src/utilities/animate.ts uses worklet and you cannot modify the objects inside the worklet, as explained here: software-mansion/react-native-reanimated#5430 (comment).

Solution

We have to add reduceMotion if:

ReduceMotion exists (it does not in earlier versions of react-native-reanimated)
the passed config is not undefined (to preserve current behaviour with default configs)

It would be better to do it in one place or we can extract the logic to the utility function

env-info

  expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.4.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.11.1 - ~/.volta/tools/image/node/20.11.1/bin/node
      Yarn: 1.22.22 - ~/.volta/tools/image/yarn/1.22.22/bin/yarn
      npm: 10.7.0 - ~/projects/alergeek/intu/app/node_modules/.bin/npm
      Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.14.3 - /Users/frydson/.rbenv/shims/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.4, iOS 17.4, macOS 14.4, tvOS 17.4, visionOS 1.1, watchOS 10.4
    IDEs:
      Android Studio: 2021.2 AI-212.5712.43.2112.8512546
      Xcode: 15.3/15E204a - /usr/bin/xcodebuild
    npmPackages:
      @expo/metro-config: 0.18.1 => 0.18.1 
      babel-preset-expo: 11.0.0 => 11.0.0 
      expo: 51.0.1 => 51.0.1 
      react: 18.2.0 => 18.2.0 
      react-native: 0.74.1 => 0.74.1 
    Expo Workflow: bare

You can't modify the object inside `worklet`: software-mansion/react-native-reanimated#5430 (comment)

dfnerio · 2024-06-08T01:38:40Z

Nice! This warning is really annoying. Could we assign a maintainer for review? Other PRs here don't seem to get much traction 😕

jael0x · 2024-06-10T22:32:46Z

Very nice, thanks! I just added this patch and works really well! No more warnings

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
index f20e3dc..9d190f5 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
@@ -21,6 +21,7 @@ import Animated, {
   useWorkletCallback,
   WithSpringConfig,
   WithTimingConfig,
+  ReduceMotion,
 } from 'react-native-reanimated';
 import { State } from 'react-native-gesture-handler';
 import {
@@ -98,7 +99,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#region extract props
     const {
       // animations configurations
-      animationConfigs: _providedAnimationConfigs,
+      animationConfigs,
 
       // configurations
       index: _providedIndex = 0,
@@ -172,6 +173,20 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     } = props;
     //#endregion
 
+    //#region animations configurations
+    const _providedAnimationConfigs = useMemo(() => {
+      if (!animationConfigs) {
+        return undefined;
+      }
+
+      if (ReduceMotion) {
+        animationConfigs.reduceMotion = ReduceMotion.Never;
+      }
+
+      return animationConfigs;
+    }, [animationConfigs]);
+    //#endregion
+
     //#region layout variables
     /**
      * This variable is consider an internal variable,
@@ -722,6 +737,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          * force animation configs from parameters, if provided
          */
         if (configs !== undefined) {
+          if (ReduceMotion) {
+            configs.reduceMotion = ReduceMotion.Never;
+          }
           animatedPosition.value = animate({
             point: position,
             configs,
diff --git a/node_modules/@gorhom/bottom-sheet/src/constants.ts b/node_modules/@gorhom/bottom-sheet/src/constants.ts
index cc8fb9f..6aaa5a3 100644
--- a/node_modules/@gorhom/bottom-sheet/src/constants.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/constants.ts
@@ -1,5 +1,5 @@
 import { Dimensions, Platform } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+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');
@@ -72,11 +72,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 =
diff --git a/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts b/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts
index 81fec5b..0ce4c9a 100644
--- a/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts
@@ -4,8 +4,6 @@ import {
   withTiming,
   withSpring,
   AnimationCallback,
-  // @ts-ignore
-  ReduceMotion,
 } from 'react-native-reanimated';
 import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';
 
@@ -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

min6390 · 2024-06-11T08:43:50Z

Very nice, thanks! I just added this patch and works really well! No more warnings

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
index f20e3dc..9d190f5 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
@@ -21,6 +21,7 @@ import Animated, {
   useWorkletCallback,
   WithSpringConfig,
   WithTimingConfig,
+  ReduceMotion,
 } from 'react-native-reanimated';
 import { State } from 'react-native-gesture-handler';
 import {
@@ -98,7 +99,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#region extract props
     const {
       // animations configurations
-      animationConfigs: _providedAnimationConfigs,
+      animationConfigs,
 
       // configurations
       index: _providedIndex = 0,
@@ -172,6 +173,20 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     } = props;
     //#endregion
 
+    //#region animations configurations
+    const _providedAnimationConfigs = useMemo(() => {
+      if (!animationConfigs) {
+        return undefined;
+      }
+
+      if (ReduceMotion) {
+        animationConfigs.reduceMotion = ReduceMotion.Never;
+      }
+
+      return animationConfigs;
+    }, [animationConfigs]);
+    //#endregion
+
     //#region layout variables
     /**
      * This variable is consider an internal variable,
@@ -722,6 +737,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          * force animation configs from parameters, if provided
          */
         if (configs !== undefined) {
+          if (ReduceMotion) {
+            configs.reduceMotion = ReduceMotion.Never;
+          }
           animatedPosition.value = animate({
             point: position,
             configs,
diff --git a/node_modules/@gorhom/bottom-sheet/src/constants.ts b/node_modules/@gorhom/bottom-sheet/src/constants.ts
index cc8fb9f..6aaa5a3 100644
--- a/node_modules/@gorhom/bottom-sheet/src/constants.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/constants.ts
@@ -1,5 +1,5 @@
 import { Dimensions, Platform } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+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');
@@ -72,11 +72,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 =
diff --git a/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts b/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts
index 81fec5b..0ce4c9a 100644
--- a/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts
@@ -4,8 +4,6 @@ import {
   withTiming,
   withSpring,
   AnimationCallback,
-  // @ts-ignore
-  ReduceMotion,
 } from 'react-native-reanimated';
 import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';
 
@@ -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

awesome

syed-shoaib-ali · 2024-06-14T21:16:16Z

when it will be merged?

tmeduho · 2024-06-14T23:42:19Z

@gorhom

farizkamini · 2024-06-17T09:58:59Z

still hope and wait it merged

parchinski · 2024-06-17T17:02:55Z

please merge @gorhom.

PalhanooWabi · 2024-06-18T06:25:27Z

This solved flawlessly, omg I was with this warning for days now, Thanks bro

Kirillsocivka · 2024-06-20T18:46:43Z

What's up with the merger?

x43n · 2024-06-20T22:51:14Z

Our app is on fire, please merge this now 😬 🧑‍🚒

cenksari · 2024-06-24T10:07:05Z

I'm still waiting for merge 🥱

sanduluca · 2024-06-24T10:17:17Z

All of us are waiting 😄

khayym · 2024-06-24T10:39:35Z

We are waiting for @gorhom to merge, please.

bhavesh-kreeti · 2024-06-24T11:07:18Z

we are waiting for the merge @gorhom

JamesUOA · 2024-06-24T13:36:06Z

please merge 🙏

pafry7 · 2024-06-24T14:22:42Z

For everyone waiting - you can patch the package locally in your projects using patch-package: https://github.com/ds300/patch-package

TesterLeon · 2024-06-25T21:26:00Z

Waiting for this as well

jbagaresgaray · 2024-06-26T16:00:13Z

Any updates on this PR?

oalhait · 2024-06-27T21:32:13Z

🙏🏻please merge🙏🏻

Rafazor · 2024-06-29T10:51:24Z

+1 🙏🏻

RemiHin · 2024-06-29T17:03:11Z

+1 please merge

Adoobdoob71 · 2024-06-30T18:54:27Z

🙏🙏

Maxhu787 · 2024-07-01T05:03:08Z

import {
  WithSpringConfig,
  WithTimingConfig,
  withTiming,
  withSpring,
  AnimationCallback,
  ReduceMotion,
} from 'react-native-reanimated';
import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';

interface AnimateParams {
  point: number;
  velocity?: number;
  configs?: WithSpringConfig | WithTimingConfig;
  onComplete?: AnimationCallback;
}

export const animate = ({
  point,
  configs = undefined,
  velocity = 0,
  onComplete,
}: AnimateParams) => {
  'worklet';

  if (!configs) {
    configs = ANIMATION_CONFIGS;
  }

  // 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.
  let newConfigs = configs;
  if (ReduceMotion) {
    newConfigs = { ...configs, reduceMotion: ReduceMotion.Never };
  }

  // detect animation type
  const type =
    'duration' in newConfigs || 'easing' in newConfigs
      ? ANIMATION_METHOD.TIMING
      : ANIMATION_METHOD.SPRING;

  if (type === ANIMATION_METHOD.TIMING) {
    return withTiming(point, newConfigs as WithTimingConfig, onComplete);
  } else {
    return withSpring(
      point,
      Object.assign({ velocity }, newConfigs) as WithSpringConfig,
      onComplete
    );
  }
};

trungledangAxonActive

LGTM!

fix: assigning to read-only property 'reduceMotion'

9c4c6eb

You can't modify the object inside `worklet`: software-mansion/react-native-reanimated#5430 (comment)

fahad86 mentioned this pull request Jun 6, 2024

[v4] [Reanimated] Tried to modify key reduceMotion of an object which has been already passed to a worklet #1854

Open

paulschreiber mentioned this pull request Jun 14, 2024

Reanimated generates reduceMotion console warning techmatters/terraso-mobile-client#1548

Closed

rodperottoni approved these changes Jul 1, 2024

View reviewed changes

tmeduho approved these changes Jul 2, 2024

View reviewed changes

trungledangAxonActive approved these changes Jul 4, 2024

View reviewed changes

datngotan-aavn approved these changes Jul 4, 2024

View reviewed changes

ebere-hoag approved these changes Jul 4, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

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

Are you sure you want to change the base?

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

Conversation

Motivation

Cause

Solution

env-info

Choose a reason for hiding this comment