From 590f74efddbe32a7b78f08a0cae917319446f993 Mon Sep 17 00:00:00 2001 From: Mattermost Build Date: Tue, 30 Jan 2024 13:40:38 +0200 Subject: [PATCH] Remove motion reducer from critical animations (#7786) (#7793) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Mattermost Build (cherry picked from commit 780f62327429744e1d4a79bd7995e95bdadbd509) Co-authored-by: Daniel Espino García --- app/screens/login/index.tsx | 4 +-- app/screens/onboarding/index.tsx | 4 +-- app/screens/server/index.tsx | 4 +-- patches/@gorhom+bottom-sheet+4.5.1.patch | 40 ++++++++++++++++++++++++ 4 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 patches/@gorhom+bottom-sheet+4.5.1.patch diff --git a/app/screens/login/index.tsx b/app/screens/login/index.tsx index a6ad5f66d..cbda07707 100644 --- 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 index f5c579d31..24b634a82 100644 --- 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 index dd9339b7b..180ef54c6 100644 --- 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 new file mode 100644 index 000000000..edf3002b0 --- /dev/null +++ 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