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 😄

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!

beepov · 2024-07-07T16:39:12Z

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

That's really helpful while I'm waiting for the release. Save my time Thank you.

correafederico25 · 2024-07-08T04:12:36Z

Please merge!!!

aymather · 2024-07-08T18:33:39Z

dies slowly

ng-ha · 2024-07-09T02:13:39Z

after applying this patch, i still get warning "Tried to modify key reduceMotion of an object which has been already passed to a worklet." when using bottom sheet with detached option on: <BottomSheetModal detached ... />

beepov · 2024-07-09T03:48:10Z

after applying this patch, i still get warning "Tried to modify key reduceMotion of an object which has been already passed to a worklet." when using bottom sheet with detached option on: <BottomSheetModal detached ... />

How you patch that? can you show me your patch file? I did and it really work.

ng-ha · 2024-07-09T04:03:58Z

@beepov It works for me too, but only for normal ones, not for detached ones. In my case i use a custom detached one with animations and other stuffs.
Here is my patch (yarn v3, react native 0.74.3).

@gorhom-bottom-sheet-npm-4.6.3-6e54aa1a30.patch

sayan-wholewave · 2024-07-10T08:30:26Z

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

it's working perfectly.

mrtawil · 2024-07-10T10:11:58Z

+1

matinzd · 2024-07-10T14:07:35Z

Is there any possibility to prioritise this? This is hard to patch since the package is minified.

Eoinr2661 · 2024-07-10T15:15:07Z

+1

EDIT: updating to the alpha has this patched: npm install / yarn add the following:

"@gorhom/bottom-sheet": "^5.0.0-alpha.10",

gorhom said to someone else here that alpha is stable, I've had for a few days now without issues, seems to fix the problem !

ahmadbakhshi · 2024-07-10T21:46:52Z

+1

zerobits-de · 2024-07-11T12:43:25Z

+1

sizuf · 2024-07-11T20:06:20Z

Can confirm patching fixes the issue.

syed-shoaib-ali · 2024-07-13T02:17:23Z

It has been 1.5 month since the PR is open kindly someone prioritise this and merge it, please

RemiHin · 2024-07-15T05:23:34Z

@gorhom are you okay?

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")

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

cenksari approved these changes Jul 7, 2024

View reviewed changes

dsilvam approved these changes Jul 7, 2024

View reviewed changes

TafaraMutseta approved these changes Jul 8, 2024

View reviewed changes

oronium approved these changes Jul 8, 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

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

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

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

beepov commented Jul 7, 2024

correafederico25 commented Jul 8, 2024

aymather commented Jul 8, 2024

ng-ha commented Jul 9, 2024 • edited Loading

beepov commented Jul 9, 2024

ng-ha commented Jul 9, 2024 • edited Loading

sayan-wholewave commented Jul 10, 2024

mrtawil commented Jul 10, 2024

matinzd commented Jul 10, 2024

Eoinr2661 commented Jul 10, 2024 • edited Loading

ahmadbakhshi commented Jul 10, 2024

zerobits-de commented Jul 11, 2024

sizuf commented Jul 11, 2024 • edited Loading

syed-shoaib-ali commented Jul 13, 2024 • edited Loading

RemiHin commented Jul 15, 2024

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

jael0x commented Jun 10, 2024 •

edited

Loading

ng-ha commented Jul 9, 2024 •

edited

Loading

ng-ha commented Jul 9, 2024 •

edited

Loading

Eoinr2661 commented Jul 10, 2024 •

edited

Loading

sizuf commented Jul 11, 2024 •

edited

Loading

syed-shoaib-ali commented Jul 13, 2024 •

edited

Loading

matinzd commented Jul 16, 2024 •

edited

Loading

AndrewDeminWeb commented Jul 18, 2024 •

edited

Loading