Fix useNativeDriver warning on web

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}

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],

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],

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}

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]);
 

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();
         },

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,15 +35,15 @@ function FloatingMessageCounter(props) {
         Animated.spring(translateY, {
             toValue: MARKER_ACTIVE_TRANSLATE_Y,
             duration: 80,
-            useNativeDriver: true,
+            useNativeDriver,
         }).start();
     }, [translateY]);
 
     const hide = useCallback(() => {
         Animated.spring(translateY, {
             toValue: MARKER_INACTIVE_TRANSLATE_Y,
             duration: 80,
-            useNativeDriver: true,
+            useNativeDriver,
         }).start();
     }, [translateY]);
 

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();