From 3c64f308f1324b088e0c5ccffb4e1170cea09659 Mon Sep 17 00:00:00 2001
From: Pablo Velez Vidal <pablovv2016@gmail.com>
Date: Thu, 3 Nov 2022 00:07:57 +0100
Subject: [PATCH] fix all remaining animations using reanimate

---
 app/screens/onboarding/footer_buttons.tsx |  4 +-
 app/screens/onboarding/index.tsx          |  7 --
 app/screens/onboarding/slide.tsx          | 99 +++++++++++++----------
 3 files changed, 59 insertions(+), 51 deletions(-)

diff --git a/app/screens/onboarding/footer_buttons.tsx b/app/screens/onboarding/footer_buttons.tsx
index 0d5ab9494..00821a62b 100644
--- a/app/screens/onboarding/footer_buttons.tsx
+++ b/app/screens/onboarding/footer_buttons.tsx
@@ -1,10 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useEffect} from 'react';
+import React from 'react';
 import {Pressable, useWindowDimensions, View} from 'react-native';
 import Button from 'react-native-button';
-import Animated, {interpolate, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated';
 
 import CompassIcon from '@app/components/compass_icon';
 import FormattedText from '@app/components/formatted_text';
diff --git a/app/screens/onboarding/index.tsx b/app/screens/onboarding/index.tsx
index 9752ef298..22968573a 100644
--- a/app/screens/onboarding/index.tsx
+++ b/app/screens/onboarding/index.tsx
@@ -51,13 +51,6 @@ const Onboarding = ({
         setIsLastSlide(!isLastSlide);
     };
 
-    // const transform = useAnimatedStyle(() => {
-    //     const duration = Platform.OS === 'android' ? 250 : 350;
-    //     return {
-    //         transform: [{translateX: withTiming(scrollX.value, {duration})}],
-    //     };
-    // }, []);
-
     const renderSlide = useCallback(({item, index}: ListRenderItemInfo<any>) => {
         return (
             <SlideItem
diff --git a/app/screens/onboarding/slide.tsx b/app/screens/onboarding/slide.tsx
index 340d965b2..8ace39a5b 100644
--- a/app/screens/onboarding/slide.tsx
+++ b/app/screens/onboarding/slide.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 import {View, useWindowDimensions} from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated';
 
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
@@ -56,65 +56,80 @@ const SlideItem = ({theme, item, scrollX, index}: Props) => {
     const styles = getStyleSheet(theme);
     const SvgImg = item.image;
 
-    // const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
+    const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
 
-    // const translateImage = scrollX.interpolate({
-    //     inputRange,
-    //     outputRange: [width * 2, 0, -width * 2],
-    // });
+    const translateImage = useAnimatedStyle(() => {
+        const translateImageInterpolate = interpolate(
+            scrollX.value,
+            inputRange,
+            [width * 2, 0, -width * 2],
+        );
 
-    // const translateTitle = scrollX.interpolate({
-    //     inputRange,
-    //     outputRange: [width * 0.6, 0, -width * 0.6],
-    // });
+        return {
+            transform: [{
+                translateX: translateImageInterpolate,
+            }],
+        };
+    });
 
-    // const translateDescription = scrollX.interpolate({
-    //     inputRange,
-    //     outputRange: [width * 0.2, 0, -width * 0.2],
-    // });
+    const translateTitle = useAnimatedStyle(() => {
+        const translateTitleInterpolate = interpolate(
+            scrollX.value,
+            inputRange,
+            [width * 0.6, 0, -width * 0.6],
+        );
 
-    // const opacity = scrollX.interpolate({
-    //     inputRange,
-    //     outputRange: [0.2, 1, 0.2],
-    // });
+        return {
+            transform: [{
+                translateX: translateTitleInterpolate,
+            }],
+        };
+    });
+
+    const translateDescription = useAnimatedStyle(() => {
+        const translateDescriptionInterpolate = interpolate(
+            scrollX.value,
+            inputRange,
+            [width * 0.2, 0, -width * 0.2],
+        );
+
+        return {
+            transform: [{
+                translateX: translateDescriptionInterpolate,
+            }],
+        };
+    });
+
+    const opacity = useAnimatedStyle(() => {
+        const opacityInterpolate = interpolate(
+            scrollX.value,
+            inputRange,
+            [0.2, 1, 0.2],
+        );
+
+        return {opacity: opacityInterpolate};
+    });
 
     return (
         <View style={[styles.itemContainer, {width}]}>
             <Animated.View
-                // style={[{
-                //     transform: [{
-                //         translateX: translateImage,
-                //     }],
-                // }]}
+                style={[translateImage]}
             >
                 <SvgImg
-                    // style={[styles.image, {
-                    //     width,
-                    //     resizeMode: 'contain',
-                    // }]}
-                    style={[styles.image]}
+                    style={[styles.image, {
+                        width,
+                        resizeMode: 'contain',
+                    }]}
                 />
             </Animated.View>
             <View style={{flex: 0.3}}>
                 <Animated.Text
-                    // style={[styles.title, (index === 0 ? styles.fontFirstTitle : styles.fontTitle), {
-                    //     transform: [{
-                    //         translateX: translateTitle,
-                    //     }],
-                    //     opacity,
-                    // }]}
-                    style={[styles.title, (index === 0 ? styles.fontFirstTitle : styles.fontTitle)]}
+                    style={[styles.title, (index === 0 ? styles.fontFirstTitle : styles.fontTitle), translateTitle, opacity]}
                 >
                     {item.title}
                 </Animated.Text>
                 <Animated.Text
-                    // style={[styles.description, {
-                    //     transform: [{
-                    //         translateX: translateDescription,
-                    //     }],
-                    //     opacity,
-                    // }]}
-                    style={[styles.description]}
+                    style={[styles.description, translateDescription, opacity]}
                 >
                     {item.description}
                 </Animated.Text>