From b7c49ec2038ba411e87d51b6c104e5b8bfce9e21 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 13 Sep 2023 22:13:27 +0800 Subject: [PATCH] set useNativeDriver on web --- src/components/AnimatedStep/index.js | 3 ++- src/components/AttachmentModal.js | 3 ++- src/components/GrowlNotification/index.js | 3 ++- src/components/Modal/BaseModal.js | 5 +++-- src/components/Switch.js | 3 ++- src/components/TextInput/BaseTextInput.js | 5 +++-- src/pages/home/report/FloatingMessageCounter/index.js | 5 +++-- src/styles/animation/SpinningIndicatorAnimation.js | 4 ++-- 8 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/AnimatedStep/index.js b/src/components/AnimatedStep/index.js index a8b9b80fcc0e..5b0dc8bc78fa 100644 --- a/src/components/AnimatedStep/index.js +++ b/src/components/AnimatedStep/index.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import * as Animatable from 'react-native-animatable'; import CONST from '../../CONST'; import styles from '../../styles/styles'; +import useNativeDriver from '../../libs/useNativeDriver'; const propTypes = { /** Children to wrap in AnimatedStep. */ @@ -47,7 +48,7 @@ function AnimatedStep(props) { }} duration={CONST.ANIMATED_TRANSITION} animation={getAnimationStyle(props.direction)} - useNativeDriver + useNativeDriver={useNativeDriver} style={props.style} > {props.children} diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index d39906faf3a3..bbb0662132d2 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -25,6 +25,7 @@ import HeaderGap from './HeaderGap'; import SafeAreaConsumer from './SafeAreaConsumer'; import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL'; import reportPropTypes from '../pages/reportPropTypes'; +import useNativeDriver from '../libs/useNativeDriver'; /** * Modal render prop component that exposes modal launching triggers that can be used @@ -294,7 +295,7 @@ function AttachmentModal(props) { Animated.timing(confirmButtonFadeAnimation, { toValue, duration: 100, - useNativeDriver: true, + useNativeDriver, }).start(); }, [confirmButtonFadeAnimation], diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index 60bd1bf00587..e8f9a2f76545 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.js @@ -10,6 +10,7 @@ import GrowlNotificationContainer from './GrowlNotificationContainer'; import CONST from '../../CONST'; import * as Growl from '../../libs/Growl'; import * as Pressables from '../Pressable'; +import useNativeDriver from '../../libs/useNativeDriver'; const types = { [CONST.GROWL.SUCCESS]: { @@ -59,7 +60,7 @@ function GrowlNotification(_, ref) { Animated.spring(translateY, { toValue: val, duration: 80, - useNativeDriver: true, + useNativeDriver, }).start(); }, [translateY], diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index ab9d420f949c..fc64d8f38243 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -13,6 +13,7 @@ import useWindowDimensions from '../../hooks/useWindowDimensions'; import variables from '../../styles/variables'; import CONST from '../../CONST'; import ComposerFocusManager from '../../libs/ComposerFocusManager'; +import useNativeDriver from '../../libs/useNativeDriver'; const propTypes = { ...modalPropTypes, @@ -40,7 +41,7 @@ function BaseModal({ fullscreen, animationIn, animationOut, - useNativeDriver, + useNativeDriver: useNativeDriverProp, hideModalContentWhileAnimating, animationInTiming, animationOutTiming, @@ -187,7 +188,7 @@ function BaseModal({ deviceWidth={windowWidth} animationIn={animationIn || modalStyleAnimationIn} animationOut={animationOut || modalStyleAnimationOut} - useNativeDriver={useNativeDriver} + useNativeDriver={useNativeDriverProp && useNativeDriver} hideModalContentWhileAnimating={hideModalContentWhileAnimating} animationInTiming={animationInTiming} animationOutTiming={animationOutTiming} diff --git a/src/components/Switch.js b/src/components/Switch.js index 3b7f464b00e5..5c8a0da925f3 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -4,6 +4,7 @@ import {Animated} from 'react-native'; import CONST from '../CONST'; import styles from '../styles/styles'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; +import useNativeDriver from '../libs/useNativeDriver'; const propTypes = { /** Whether the switch is toggled to the on position */ @@ -28,7 +29,7 @@ function Switch(props) { Animated.timing(offsetX.current, { toValue: props.isOn ? OFFSET_X.ON : OFFSET_X.OFF, duration: 300, - useNativeDriver: true, + useNativeDriver, }).start(); }, [props.isOn]); diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 19453be054d4..0f44aaf8fe14 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -20,6 +20,7 @@ import FormHelpMessage from '../FormHelpMessage'; import isInputAutoFilled from '../../libs/isInputAutoFilled'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import withLocalize from '../withLocalize'; +import useNativeDriver from '../../libs/useNativeDriver'; function BaseTextInput(props) { const inputValue = props.value || props.defaultValue || ''; @@ -86,12 +87,12 @@ function BaseTextInput(props) { Animated.spring(labelTranslateY, { toValue: translateY, duration: styleConst.LABEL_ANIMATION_DURATION, - useNativeDriver: true, + useNativeDriver, }), Animated.spring(labelScale, { toValue: scale, duration: styleConst.LABEL_ANIMATION_DURATION, - useNativeDriver: true, + useNativeDriver, }), ]).start(); }, diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js index 73fe02df129b..c477b8137bea 100644 --- a/src/pages/home/report/FloatingMessageCounter/index.js +++ b/src/pages/home/report/FloatingMessageCounter/index.js @@ -9,6 +9,7 @@ import * as Expensicons from '../../../../components/Icon/Expensicons'; import themeColors from '../../../../styles/themes/default'; import useLocalize from '../../../../hooks/useLocalize'; import FloatingMessageCounterContainer from './FloatingMessageCounterContainer'; +import useNativeDriver from '../../../../libs/useNativeDriver'; const propTypes = { /** Whether the New Messages indicator is active */ @@ -34,7 +35,7 @@ function FloatingMessageCounter(props) { Animated.spring(translateY, { toValue: MARKER_ACTIVE_TRANSLATE_Y, duration: 80, - useNativeDriver: true, + useNativeDriver, }).start(); }, [translateY]); @@ -42,7 +43,7 @@ function FloatingMessageCounter(props) { Animated.spring(translateY, { toValue: MARKER_INACTIVE_TRANSLATE_Y, duration: 80, - useNativeDriver: true, + useNativeDriver, }).start(); }, [translateY]); diff --git a/src/styles/animation/SpinningIndicatorAnimation.js b/src/styles/animation/SpinningIndicatorAnimation.js index 8e7fd0277221..29044f0d127a 100644 --- a/src/styles/animation/SpinningIndicatorAnimation.js +++ b/src/styles/animation/SpinningIndicatorAnimation.js @@ -42,7 +42,7 @@ class SpinningIndicatorAnimation { toValue: 1.666, tension: 1, isInteraction: false, - useNativeDriver: true, + useNativeDriver, }).start(); } @@ -56,7 +56,7 @@ class SpinningIndicatorAnimation { toValue: 1, tension: 1, isInteraction: false, - useNativeDriver: true, + useNativeDriver, }).start(() => { this.rotate.resetAnimation(); this.scale.resetAnimation();