Remove motion reducer from critical animations (#7786) (#7793)

Co-authored-by: Mattermost Build <[email protected]> (cherry picked from commit 780f623) Co-authored-by: Daniel Espino García <[email protected]>
mattermost · Jan 30, 2024 · 590f74e · 590f74e
1 parent 28cc827
commit 590f74e
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 6 deletions.
diff --git a/app/screens/login/index.tsx b/app/screens/login/index.tsx
@@ -5,7 +5,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {Platform, useWindowDimensions, View, type LayoutChangeEvent} from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {Navigation} from 'react-native-navigation';
-import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {ReduceMotion, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
 import FormattedText from '@components/formatted_text';
@@ -134,7 +134,7 @@ const LoginOptions = ({
     const transform = useAnimatedStyle(() => {
         const duration = Platform.OS === 'android' ? 250 : 350;
         return {
-            transform: [{translateX: withTiming(translateX.value, {duration})}],
+            transform: [{translateX: withTiming(translateX.value, {duration, reduceMotion: ReduceMotion.Never})}],
         };
     }, []);
 

diff --git a/app/screens/onboarding/index.tsx b/app/screens/onboarding/index.tsx
@@ -14,7 +14,7 @@ import {
     BackHandler,
 } from 'react-native';
 import {Navigation} from 'react-native-navigation';
-import Animated, {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {ReduceMotion, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 
 import {storeOnboardingViewedValue} from '@actions/app/global';
 import {Screens} from '@constants';
@@ -108,7 +108,7 @@ const Onboarding = ({
     const transform = useAnimatedStyle(() => {
         const duration = Platform.OS === 'android' ? 250 : 350;
         return {
-            transform: [{translateX: withTiming(translateX.value, {duration})}],
+            transform: [{translateX: withTiming(translateX.value, {duration, reduceMotion: ReduceMotion.Never})}],
         };
     }, []);
 

diff --git a/app/screens/server/index.tsx b/app/screens/server/index.tsx
@@ -7,7 +7,7 @@ import {useIntl} from 'react-intl';
 import {Alert, BackHandler, Platform, useWindowDimensions, View} from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {Navigation} from 'react-native-navigation';
-import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {ReduceMotion, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
 import {doPing} from '@actions/remote/general';
@@ -350,7 +350,7 @@ const Server = ({
     const transform = useAnimatedStyle(() => {
         const duration = Platform.OS === 'android' ? 250 : 350;
         return {
-            transform: [{translateX: withTiming(translateX.value, {duration})}],
+            transform: [{translateX: withTiming(translateX.value, {duration, reduceMotion: ReduceMotion.Never})}],
         };
     }, []);
 

diff --git a/patches/@gorhom+bottom-sheet+4.5.1.patch b/patches/@gorhom+bottom-sheet+4.5.1.patch
@@ -0,0 +1,40 @@
+diff --git a/node_modules/@gorhom/bottom-sheet/src/hooks/useBottomSheetTimingConfigs.ts b/node_modules/@gorhom/bottom-sheet/src/hooks/useBottomSheetTimingConfigs.ts
+index 9d2f61d..ac91e40 100644
+--- a/node_modules/@gorhom/bottom-sheet/src/hooks/useBottomSheetTimingConfigs.ts
++++ b/node_modules/@gorhom/bottom-sheet/src/hooks/useBottomSheetTimingConfigs.ts
+@@ -1,5 +1,5 @@
+ import { useMemo } from 'react';
+-import type { WithTimingConfig } from 'react-native-reanimated';
++import { ReduceMotion, type WithTimingConfig } from 'react-native-reanimated';
+ import { ANIMATION_DURATION, ANIMATION_EASING } from '../constants';
+
+ /**
+@@ -14,6 +14,7 @@ export const useBottomSheetTimingConfigs = (configs: WithTimingConfig) => {
+     const _configs: WithTimingConfig = {
+       easing: configs.easing || ANIMATION_EASING,
+       duration: configs.duration || ANIMATION_DURATION,
++      reduceMotion: ReduceMotion.Never,
+     };
+
+     return _configs;
+diff --git a/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts b/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts
+index 0ce4c9a..c01a069 100644
+--- a/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts
++++ b/node_modules/@gorhom/bottom-sheet/src/utilities/animate.ts
+@@ -4,6 +4,7 @@ import {
+   withTiming,
+   withSpring,
+   AnimationCallback,
++  ReduceMotion,
+ } from 'react-native-reanimated';
+ import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';
+
+@@ -26,6 +27,8 @@ export const animate = ({
+     configs = ANIMATION_CONFIGS;
+   }
+
++  configs = {...configs, reduceMotion: ReduceMotion.Never};
++
+   // detect animation type
+   const type =
+     'duration' in configs || 'easing' in configs