make scroll to easing and depending on how many items to move, fix SVG

app/init/launch.ts

@@ -127,7 +127,7 @@ const launchApp = async (props: LaunchProps, resetNavigation = true) => {
         }
     }
 
-    return launchToOnboarding(props);
+    return launchToOnboarding(props, resetNavigation);
 };
 
 const launchToHome = async (props: LaunchProps) => {
@@ -181,7 +181,10 @@ const launchToServer = (props: LaunchProps, resetNavigation: Boolean) => {
     return goToScreen(Screens.SERVER, title, {...props});
 };
 
-const launchToOnboarding = (props: LaunchProps) => {
+const launchToOnboarding = (props: LaunchProps, resetNavigation = true) => {
+    if (resetNavigation) {
+        launchToServer(props, resetNavigation);
+    }
     return resetToOnboarding(props);
 };
 

app/screens/onboarding/index.tsx

@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback} from 'react';
-import {View, ListRenderItemInfo, useWindowDimensions, SafeAreaView} from 'react-native';
-import Animated, {useAnimatedRef, useAnimatedScrollHandler, useDerivedValue, useSharedValue} from 'react-native-reanimated';
+import React, {useCallback, useEffect, useRef} from 'react';
+import {View, ListRenderItemInfo, useWindowDimensions, SafeAreaView, ScrollView, Animated as AnimatedRN} from 'react-native';
+import Animated, {Easing, useAnimatedRef, useAnimatedScrollHandler, useDerivedValue, useSharedValue} from 'react-native-reanimated';
 
 import {Screens} from '@app/constants';
 import Background from '@screens/background';
@@ -30,15 +30,31 @@ const Onboarding = ({
     const styles = getStyleSheet(theme);
     const slidesData = useSlidesData().slidesData;
     const lastSlideIndex = slidesData.length - 1;
-    const slidesRef = useAnimatedRef<Animated.ScrollView>();
+    const slidesRef = useAnimatedRef<ScrollView>();
 
-    // const currentIndex = useSharedValue(0);
     const scrollX = useSharedValue(0);
+    const scrollAnimation = useRef(new AnimatedRN.Value(0));
+
     const currentIndex = useDerivedValue(() => Math.round(scrollX.value / width));
 
-    const moveToSlide = useCallback((slideIndexToMove: number) => {
-        slidesRef.current?.scrollTo({x: (slideIndexToMove * width), animated: true});
-    }, [slidesRef.current]);
+    useEffect(() => {
+        scrollAnimation.current?.addListener((animation) => {
+            slidesRef.current?.scrollTo({
+                x: animation.value,
+                animated: false,
+            });
+        });
+        return () => scrollAnimation.current.removeAllListeners();
+    }, []);
+
+    const moveToSlide = (slideIndexToMove: number) => {
+        AnimatedRN.timing(scrollAnimation.current, {
+            toValue: (slideIndexToMove * width),
+            duration: Math.abs(currentIndex.value - slideIndexToMove) * 200,
+            useNativeDriver: true,
+            easing: Easing.linear,
+        }).start();
+    };
 
     const nextSlide = useCallback(() => {
         const nextSlideIndex = currentIndex.value + 1;
@@ -88,7 +104,7 @@ const Onboarding = ({
                     pagingEnabled={true}
                     bounces={false}
                     onScroll={scrollHandler}
-                    ref={slidesRef}
+                    ref={slidesRef as any}
                 >
                     {slidesData.map((item, index) => {
                         return renderSlide({item, index} as ListRenderItemInfo<OnboardingItem>);