add the outer dot style

app/screens/onboarding/footer_buttons.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
-import {View} from 'react-native';
+import React, {useEffect} from 'react';
+import {useWindowDimensions, View} from 'react-native';
 import Button from 'react-native-button';
 
 import CompassIcon from '@app/components/compass_icon';
@@ -15,6 +15,8 @@ type Props = {
     isLastSlide: boolean;
     nextSlideHandler: any;
     signInHandler: any;
+    scrollX: any;
+
 };
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
@@ -34,9 +36,15 @@ const FooterButtons = ({
     nextSlideHandler,
     signInHandler,
     isLastSlide,
+    scrollX,
 }: Props) => {
+    const {width} = useWindowDimensions();
     const styles = getStyleSheet(theme);
 
+    useEffect(() => {
+        console.log('is last slide');
+    }, [isLastSlide]);
+
     let mainButtonText = (
         <View style={{flexDirection: 'row'}}>
             <FormattedText

app/screens/onboarding/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useRef, useState} from 'react';
-import {Platform, View, FlatList, Animated, ListRenderItemInfo} from 'react-native';
+import {Platform, View, Animated, ListRenderItemInfo} from 'react-native';
 import {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
@@ -10,12 +10,12 @@ import {generateId} from '@app/utils/general';
 import Background from '@screens/background';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 
+import FooterButtons from './footer_buttons';
 import Paginator from './paginator';
 import SlideItem from './slide';
 import slidesData from './slides_data';
 
 import type {LaunchProps} from '@typings/launch';
-import FooterButtons from './footer_buttons';
 
 interface OnboardingProps extends LaunchProps {
     theme: Theme;
@@ -117,12 +117,13 @@ const Onboarding = ({
                 isLastSlide={isLastSlide}
                 nextSlideHandler={nextSlide}
                 signInHandler={signInHandler}
+                scrollX={scrollX}
             />
         </View>
     );
 };
 
-const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
+const getStyleSheet = makeStyleSheetFromTheme(() => ({
     onBoardingContainer: {
         flex: 1,
         alignItems: 'center',

app/screens/onboarding/paginator.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {View, Animated, useWindowDimensions, TouchableOpacity} from 'react-native';
 
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {makeStyleSheetFromTheme} from '@utils/theme';
 
 type Props = {
     data: any;
@@ -13,29 +13,28 @@ type Props = {
     moveToSlide: any;
 };
 
+const DOT_SIZE = 16;
+
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     dot: {
-        height: 8,
+        height: DOT_SIZE / 2,
         borderRadius: 5,
         backgroundColor: theme.buttonBg,
-        marginHorizontal: 8,
-        width: 8,
-
-        // shadow
-        shadowOffset: {width: 0, height: 13},
-        shadowOpacity: 0.7,
-        shadowColor: theme.buttonBg,
-        shadowRadius: 6,
-        elevation: 3,
+        marginHorizontal: DOT_SIZE / 2,
+        width: DOT_SIZE / 2,
+    },
+    outerDot: {
+        height: DOT_SIZE,
+        borderRadius: DOT_SIZE / 2,
+        backgroundColor: theme.buttonBg,
+        marginHorizontal: 4,
+        marginTop: -4,
+        position: 'absolute',
+        width: DOT_SIZE,
     },
     button: {
         marginTop: 5,
     },
-    rowIcon: {
-        color: theme.buttonColor,
-        fontSize: 12,
-        marginLeft: 5,
-    },
 }));
 
 const Paginator = ({
@@ -55,7 +54,13 @@ const Paginator = ({
 
                     const opacity = scrollX.interpolate({
                         inputRange,
-                        outputRange: [0.3, 1, 0.3],
+                        outputRange: [0.25, 1, 0.25],
+                        extrapolate: 'clamp',
+                    });
+
+                    const opacityOuterDot = scrollX.interpolate({
+                        inputRange,
+                        outputRange: [0, 0.15, 0],
                         extrapolate: 'clamp',
                     });
 
@@ -64,16 +69,17 @@ const Paginator = ({
                             onPress={() => moveToSlide(i)}
                             key={item.id}
                         >
+                            <Animated.View
+                                style={[styles.outerDot, {
+                                    opacity: opacityOuterDot,
+                                }]}
+                                key={'outer-' + item.id + i.toString()}
+                            />
                             <Animated.View
                                 style={[styles.dot, {
-                                    shadowOffset: {width: 0, height: 13},
-                                    shadowOpacity: 0.7,
-                                    shadowColor: theme.buttonBg,
-                                    shadowRadius: 6,
-                                    elevation: 3,
                                     opacity,
                                 }]}
-                                key={item.id}
+                                key={item.id + i.toString()}
                             />
                         </TouchableOpacity>
                     );

app/screens/onboarding/slide.tsx

@@ -72,6 +72,11 @@ const SlideItem = ({theme, item, scrollX, index}: Props) => {
         outputRange: [width * 0.2, 0, -width * 0.2],
     });
 
+    const opacity = scrollX.interpolate({
+        inputRange,
+        outputRange: [0.2, 1, 0.2],
+    });
+
     return (
         <View style={[styles.itemContainer, {width}]}>
             <Animated.View
@@ -94,6 +99,7 @@ const SlideItem = ({theme, item, scrollX, index}: Props) => {
                         transform: [{
                             translateX: translateTitle,
                         }],
+                        opacity,
                     }]}
                 >
                     {item.title}
@@ -103,6 +109,7 @@ const SlideItem = ({theme, item, scrollX, index}: Props) => {
                         transform: [{
                             translateX: translateDescription,
                         }],
+                        opacity,
                     }]}
                 >
                     {item.description}