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!

mi-373 · 2024-07-16T00:05:37Z

I have just mentioned @gorhom on Twitter, I hope he will notice and check this PR.

brduarte · 2024-07-16T01:27:28Z

please merge @gorhom.

matinzd · 2024-07-16T17:33:01Z

I hope he is doing well. I messaged him on Twitter and haven't heard back since then. 😢
Hope he is on vacation.

mi-373 · 2024-07-18T07:59:26Z

I've got a reply from @gorhom on Twitter.

Hi there, this issue should be fixed with v5. I’ll try to wrap up v5 this weekend since it is in stable state. Give it a try and let me know

dalvimyzow · 2024-07-18T13:30:11Z

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

how to add this patch and where?

EduardoArtioli · 2024-07-18T14:00:18Z

+1

AndrewDeminWeb · 2024-07-18T14:09:02Z

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

how to add this patch and where?

u can use bun patch or yarn patch @gorhom/bottom-sheet
I did this and it worked

https://bun.sh/docs/install/patch

LukasMod · 2024-07-23T14:47:50Z

I tried "@gorhom/bottom-sheet": "^5.0.0-alpha.10" and got this error, so I guess its not 100% stable. Maybe it needs some additional changes. The patch itself also does not remove the warning in my case ("^4.6.3")

gorhom

thanks @pafry7 for fixing this issue

oalhait · 2024-07-28T20:32:41Z

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

aymather · 2024-08-11T21:25:39Z

Is anyone still having this issue? I did the upgrade and it fixed the problem, but I am still seeing it sometimes. I usually happens when I open, close, and then reopen the same bottom sheet. Am I the only one?

ng-ha · 2024-08-12T01:59:11Z

Is anyone still having this issue? I did the upgrade and it fixed the problem, but I am still seeing it sometimes. I usually happens when I open, close, and then reopen the same bottom sheet. Am I the only one?

No, you're not. I'm having this issue too.

Igornorlin · 2024-09-20T12:40:54Z

Is anyone still having this issue? I did the upgrade and it fixed the problem, but I am still seeing it sometimes. I usually happens when I open, close, and then reopen the same bottom sheet. Am I the only one?

Also having this issue

LukasMod · 2024-10-22T09:07:49Z

After upgrading to newest v 5.0.4 it looks fine and no more warnings 🚀

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

Closed

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

ArturoTorresMartinez approved these changes Jul 17, 2024

View reviewed changes

brduarte approved these changes Jul 17, 2024

View reviewed changes

Balanced02 approved these changes Jul 20, 2024

View reviewed changes

kamilkedzierski approved these changes Jul 28, 2024

View reviewed changes

gorhom approved these changes Jul 28, 2024

View reviewed changes

gorhom merged commit efd4e92 into gorhom:master Jul 28, 2024

fobos531 mentioned this pull request Oct 17, 2024

fix: cannot add new property 'reduceMotion' #1975

Closed

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

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

Conversation

pafry7 commented May 28, 2024

Motivation

Cause

Solution

env-info

dfnerio commented Jun 8, 2024

jael0x commented Jun 10, 2024 • edited Loading

min6390 commented Jun 11, 2024

syed-shoaib-ali commented Jun 14, 2024

tmeduho commented Jun 14, 2024

farizkamini commented Jun 17, 2024

parchinski commented Jun 17, 2024

PalhanooWabi commented Jun 18, 2024

Kirillsocivka commented Jun 20, 2024

x43n commented Jun 20, 2024

cenksari commented Jun 24, 2024

sanduluca commented Jun 24, 2024

khayym commented Jun 24, 2024

bhavesh-kreeti commented Jun 24, 2024

JamesUOA commented Jun 24, 2024

pafry7 commented Jun 24, 2024

TesterLeon commented Jun 25, 2024

jbagaresgaray commented Jun 26, 2024

oalhait commented Jun 27, 2024

Rafazor commented Jun 29, 2024

RemiHin commented Jun 29, 2024

Adoobdoob71 commented Jun 30, 2024

Maxhu787 commented Jul 1, 2024

trungledangAxonActive left a comment

Choose a reason for hiding this comment

mi-373 commented Jul 16, 2024

brduarte commented Jul 16, 2024

matinzd commented Jul 16, 2024 • edited Loading

mi-373 commented Jul 18, 2024

dalvimyzow commented Jul 18, 2024

EduardoArtioli commented Jul 18, 2024

AndrewDeminWeb commented Jul 18, 2024 • edited Loading

LukasMod commented Jul 23, 2024

gorhom left a comment

Choose a reason for hiding this comment

oalhait commented Jul 28, 2024

aymather commented Aug 11, 2024

ng-ha commented Aug 12, 2024

Igornorlin commented Sep 20, 2024

LukasMod commented Oct 22, 2024

jael0x commented Jun 10, 2024 •

edited

Loading

matinzd commented Jul 16, 2024 •

edited

Loading

AndrewDeminWeb commented Jul 18, 2024 •

edited

Loading