feat: Replace Animation Library to Reanimated

package.json

@@ -27,7 +27,8 @@
   "dependencies": {},
   "peerDependencies": {
     "react-native": ">=0.46.0",
-    "react-native-video": ">=2.0.0"
+    "react-native-video": ">=2.0.0",
+    "react-native-reanimated": "^2.12.0"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^3.0.1",

src/components/BottomControls.tsx

@@ -1,11 +1,11 @@
 import React, {Dispatch, SetStateAction} from 'react';
 import {
-  Animated,
   ImageBackground,
   SafeAreaView,
   StyleSheet,
   GestureResponderHandlers,
 } from 'react-native';
+import Animated from 'react-native-reanimated';
 import {Timer} from './Timer';
 import {Title} from './Title';
 import {NullControl} from './NullControl';
@@ -105,10 +105,8 @@ export const BottomControls = ({
     <Animated.View
       style={[
         _styles.bottom,
-        {
-          opacity: animations.controlsOpacity,
-          marginBottom: animations.bottomControl.marginBottom,
-        },
+        animations.controlsOpacity,
+        animations.bottomControl,
       ]}>
       <ImageBackground
         source={require('../assets/img/bottom-vignette.png')}

src/components/Overlay.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
-import {Animated, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
+import Animated from 'react-native-reanimated';
 import type {VideoAnimations} from '../types';
 
 export const Overlay = ({animations}: {animations: VideoAnimations}) => {
   return (
-    <Animated.View
-      style={[
-        _styles.overlay,
-        {
-          opacity: animations.controlsOpacity,
-        },
-      ]}
-    />
+    <Animated.View style={[_styles.overlay, animations.controlsOpacity]} />
   );
 };
 

src/components/PlayPause/PlayPause.tsx

@@ -1,5 +1,6 @@
 import React, {createRef} from 'react';
-import {Animated, Image, Platform, TouchableHighlight} from 'react-native';
+import {Image, Platform, TouchableHighlight} from 'react-native';
+import Animated from 'react-native-reanimated';
 import {Control} from '../Control';
 import {NullControl} from '../NullControl';
 import type {VideoAnimations} from '../../types';
@@ -38,7 +39,6 @@ export const PlayPause = ({
   let source = paused ? play : pause;
 
   const animatedStyles = {
-    opacity: animations.controlsOpacity,
     zIndex: showControls ? 99999 : 0,
   };
 
@@ -49,7 +49,7 @@ export const PlayPause = ({
   return (
     <Animated.View
       pointerEvents={'box-none'}
-      style={[styles.container, animatedStyles]}>
+      style={[styles.container, animatedStyles, animations.controlsOpacity]}>
       {!disableSeekButtons ? (
         <Control
           disabled={!showControls}

src/components/TopControls.tsx

@@ -1,12 +1,12 @@
 import React, {memo} from 'react';
 import {
-  Animated,
   ImageBackground,
   SafeAreaView,
   StyleSheet,
   View,
   GestureResponderHandlers,
 } from 'react-native';
+import Animated from 'react-native-reanimated';
 import {Volume} from './Volume';
 import {Back} from './Back';
 import {NullControl} from './NullControl';
@@ -64,10 +64,8 @@ export const TopControls = memo(
       <Animated.View
         style={[
           _styles.top,
-          {
-            opacity: animations.controlsOpacity,
-            marginTop: animations.topControl.marginTop,
-          },
+          animations.controlsOpacity,
+          animations.topControl,
         ]}>
         <ImageBackground
           source={require('../assets/img/top-vignette.png')}

src/hooks/useAnimations.ts

@@ -1,96 +1,63 @@
-import {useEffect, useRef} from 'react';
-import {Animated, Easing} from 'react-native';
+import { useSharedValue, withTiming, useAnimatedStyle } from 'react-native-reanimated';
 
 export const useAnimations = (
-  loading: boolean,
   controlAnimationTiming: number,
 ) => {
-  const bottomControlMarginBottom = useRef(new Animated.Value(0)).current;
-  const controlsOpacity = useRef(new Animated.Value(1)).current;
-  const topControlMarginTop = useRef(new Animated.Value(0)).current;
-  const videoOpacity = useRef(new Animated.Value(-100)).current;
-  const loaderRotateAnim = useRef(new Animated.Value(0)).current;
+
+  const bottomControlMarginBottom = useSharedValue(0);
+  const controlsOpacity = useSharedValue(1);
+  const topControlMarginTop = useSharedValue(0);
 
   const animations = {
-    bottomControl: {
-      marginBottom: bottomControlMarginBottom,
-    },
-    topControl: {
-      marginTop: topControlMarginTop,
-    },
-    video: {
-      opacity: videoOpacity,
-    },
-    loader: {
-      rotate: loaderRotateAnim,
-      MAX_VALUE: 360,
-    },
-    controlsOpacity,
+    bottomControl: useAnimatedStyle(() => {
+      return {
+        transform: [{ translateY: bottomControlMarginBottom.value }]
+      }
+    }),
+    topControl: useAnimatedStyle(() => {
+      return {
+        transform: [{ translateY: topControlMarginTop.value }]
+      }
+    }),
+
+
+    controlsOpacity: useAnimatedStyle(() => {
+      return {
+        opacity: controlsOpacity.value,
+      }
+    }),
   };
 
   const hideControlAnimation = () => {
-    Animated.parallel([
-      Animated.timing(animations.controlsOpacity, {
-        toValue: 0,
-        duration: controlAnimationTiming,
-        useNativeDriver: false,
-      }),
-      Animated.timing(animations.topControl.marginTop, {
-        toValue: -100,
-        duration: controlAnimationTiming,
-        useNativeDriver: false,
-      }),
-      Animated.timing(animations.bottomControl.marginBottom, {
-        toValue: -100,
-        duration: controlAnimationTiming,
-        useNativeDriver: false,
-      }),
-    ]).start();
+    bottomControlMarginBottom.value = withTiming(100, {
+      duration: controlAnimationTiming,
+    });
+    topControlMarginTop.value = withTiming(-100, {
+      duration: controlAnimationTiming,
+    });
+    controlsOpacity.value = withTiming(0, {
+      duration: controlAnimationTiming,
+    });
+
+
+
   };
 
   const showControlAnimation = () => {
-    Animated.parallel([
-      Animated.timing(animations.controlsOpacity, {
-        toValue: 1,
-        duration: controlAnimationTiming,
-        useNativeDriver: false,
-      }),
-      Animated.timing(animations.topControl.marginTop, {
-        toValue: 0,
-        duration: controlAnimationTiming,
-        useNativeDriver: false,
-      }),
-      Animated.timing(animations.bottomControl.marginBottom, {
-        toValue: 0,
-        duration: controlAnimationTiming,
-        useNativeDriver: false,
-      }),
-    ]).start();
+    bottomControlMarginBottom.value = withTiming(0, {
+      duration: controlAnimationTiming,
+    });
+    topControlMarginTop.value = withTiming(0, {
+      duration: controlAnimationTiming,
+    });
+    controlsOpacity.value = withTiming(1, {
+      duration: controlAnimationTiming,
+    })
+
+
   };
 
-  useEffect(() => {
-    if (loading) {
-      const loadAnimation = () => {
-        if (loading) {
-          Animated.sequence([
-            Animated.timing(animations.loader.rotate, {
-              toValue: animations.loader.MAX_VALUE,
-              duration: 1500,
-              easing: Easing.linear,
-              useNativeDriver: false,
-            }),
-            Animated.timing(animations.loader.rotate, {
-              toValue: 0,
-              duration: 0,
-              easing: Easing.linear,
-              useNativeDriver: false,
-            }),
-          ]).start(loadAnimation);
-        }
-      };
-      loadAnimation();
-    }
-  }, [animations.loader.MAX_VALUE, animations.loader.rotate, loading]);
+
 
   return {
     animations,

src/types.ts

@@ -1,19 +1,13 @@
-import type {RefObject} from 'react';
-import type {Animated, ViewStyle, StyleProp} from 'react-native';
+import type { RefObject } from 'react';
+import type { ViewStyle, StyleProp } from 'react-native';
+import type { StyleProps } from 'react-native-reanimated'
 import type VideoResource from 'react-native-video';
-import type {VideoProperties} from 'react-native-video';
+import type { VideoProperties } from 'react-native-video';
 
 export interface VideoAnimations {
-  bottomControl: {marginBottom: Animated.Value};
-  topControl: {marginTop: Animated.Value};
-  video: {
-    opacity: Animated.Value;
-  };
-  loader: {
-    rotate: Animated.Value;
-    MAX_VALUE: number;
-  };
-  controlsOpacity: Animated.Value;
+  bottomControl: StyleProps;
+  topControl: StyleProps;
+  controlsOpacity: StyleProps;
 }
 
 export interface VideoPlayerProps extends VideoProperties {