Merge pull request #2475 from ecency/sa/fix-usenativedriver-warnings

Fix useNativeDriver warnings

ios/Podfile.lock

@@ -828,4 +828,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0282022703ad578ab2d9afbf3147ba3b373b4311
 
-COCOAPODS: 1.11.2
+COCOAPODS: 1.11.3

src/components/collapsibleCard/view/collapsibleCardView.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
-import { View, TouchableHighlight, Animated } from 'react-native';
+import { View, TouchableHighlight } from 'react-native';
+import Animated, { Easing } from 'react-native-reanimated';
 
 // Constants
 
@@ -50,6 +51,7 @@ class CollapsibleCardView extends PureComponent {
     Animated.timing(this.anime.height, {
       toValue: this.anime.expanded ? this._getMinValue() : this._getMaxValue() + (moreHeight || 0),
       duration: 200,
+      easing: Easing.inOut(Easing.ease),
     }).start();
     this.anime.expanded = !this.anime.expanded;
 

src/components/pinAnimatedInput/views/pinAnimatedInputView.js

@@ -33,6 +33,7 @@ class PinAnimatedInput extends Component {
           toValue: 1,
           duration: 250,
           easing: Easing.linear,
+          useNativeDriver: false, //setting it to false as animation is not being used
         }),
       ),
     ]).start((o) => {
@@ -87,6 +88,5 @@ class PinAnimatedInput extends Component {
     );
   }
 }
-
 export default PinAnimatedInput;
 /* eslint-enable */

src/components/postBoost/postBoostStyles.js

@@ -44,7 +44,7 @@ export default EStyleSheet.create({
     borderColor: '$borderColor',
     borderRadius: 8,
     padding: 2,
-    color: '$primaryBlack',
+    // color: '$primaryBlack',
     width: 172,
     marginRight: 33,
   },

src/components/progressiveImage/index.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { View, StyleSheet, Animated } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import FastImage from 'react-native-fast-image';
+import Animated, { Easing } from 'react-native-reanimated';
 
 const styles = StyleSheet.create({
   imageOverlay: {
@@ -31,12 +32,14 @@ const ProgressiveImage = ({ thumbnailSource, source, style, ...props }) => {
     }*/
     Animated.timing(thumbnailAnimated, {
       toValue: 1,
+      easing: Easing.inOut(Easing.ease),
     }).start();
   };
 
   const onImageLoad = () => {
     Animated.timing(imageAnimated, {
       toValue: 1,
+      easing: Easing.inOut(Easing.ease),
     }).start();
   };
 

src/components/toastNotification/view/toastNotificaitonView.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Animated, TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity, Text } from 'react-native';
+import { View as AnimatedView } from 'react-native-animatable';
 
 // Styles
 import styles from './toastNotificationStyles';
@@ -12,70 +13,60 @@ class ToastNotification extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      animatedValue: new Animated.Value(0),
-    };
-  }
-
-  // Component Functions
-  _showToast() {
-    const { duration } = this.props;
-    const animatedValue = new Animated.Value(0);
-
-    this.setState({ animatedValue });
-
-    Animated.timing(animatedValue, { toValue: 1, duration: 350 }).start();
-
-    if (duration) {
-      this.closeTimer = setTimeout(() => {
-        this._hideToast();
-      }, duration);
-    }
-  }
-
-  _hideToast() {
-    const { animatedValue } = this.state;
-    const { onHide } = this.props;
-
-    Animated.timing(animatedValue, { toValue: 0.0, duration: 350 }).start(() => {
-      if (onHide) {
-        onHide();
-      }
-    });
-
-    if (this.closeTimer) {
-      clearTimeout(this.closeTimer);
-    }
   }
 
   // Component Life Cycles
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     this._showToast();
   }
 
+  handleViewRef = (ref) => (this.view = ref);
+
+  // Component Functions
+  _showToast = () => {
+    const { duration, isTop } = this.props;
+    const initialPosition = isTop ? { top: 0 } : { bottom: 0 };
+    const finalPosition = isTop ? { top: 100 } : { bottom: 100 };
+    this.view
+      .animate({ 0: { opacity: 0, ...initialPosition }, 1: { opacity: 1, ...finalPosition } })
+      .then((endState) => {
+        if (duration) {
+          this.closeTimer = setTimeout(() => {
+            this._hideToast();
+          }, duration);
+        }
+      });
+  };
+  _hideToast = () => {
+    const { isTop } = this.props;
+    const finalPosition = isTop ? { top: 0 } : { bottom: 0 };
+    const initialPosition = isTop ? { top: 100 } : { bottom: 100 };
+    this.view
+      .animate({ 0: { opacity: 1, ...initialPosition }, 1: { opacity: 0, ...finalPosition } })
+      .then((endState) => {
+        const { onHide } = this.props;
+        if (onHide) {
+          onHide();
+        }
+      });
+  };
+
   render() {
-    const { text, textStyle, style, onPress, isTop } = this.props;
-    const { animatedValue } = this.state;
-    const outputRange = isTop ? [-50, 0] : [50, 0];
-    const y = animatedValue.interpolate({
-      inputRange: [0, 1],
-      outputRange,
-    });
-    const position = isTop ? { top: 100 } : { bottom: 100 };
+    const { text, textStyle, style, onPress } = this.props;
 
     return (
       <TouchableOpacity disabled={!onPress} onPress={() => onPress && onPress()}>
-        <Animated.View
+        <AnimatedView
           style={{
             ...styles.container,
             ...style,
-            ...position,
-            opacity: animatedValue,
-            transform: [{ translateY: y }],
           }}
+          easing="ease-in-out"
+          duration={500}
+          ref={this.handleViewRef}
         >
           <Text style={[styles.text, textStyle]}>{text}</Text>
-        </Animated.View>
+        </AnimatedView>
       </TouchableOpacity>
     );
   }

src/components/toggleSwitch/view/toggleSwitchView.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
-import { View, TouchableOpacity, Animated, NativeModules } from 'react-native';
+import { View, TouchableOpacity, NativeModules } from 'react-native';
+import Animated, { Easing } from 'react-native-reanimated';
 
 // Constants
 
@@ -97,6 +98,7 @@ class ToggleSwitchView extends PureComponent {
     Animated.timing(this.offsetX, {
       toValue,
       duration,
+      easing: Easing.inOut(Easing.ease),
     }).start();
   };