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

Co-authored-by: Mattermost Build <build@mattermost.com>
(cherry picked from commit 780f623274)

Co-authored-by: Daniel Espino García <larkox@gmail.com>
This commit is contained in:
Mattermost Build 2024-01-30 13:41:46 +02:00 committed by GitHub
parent 305e0e4fde
commit 340759896e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 46 additions and 6 deletions

View file

@ -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})}],
};
}, []);

View file

@ -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})}],
};
}, []);

View file

@ -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})}],
};
}, []);

View file

@ -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