add the paginator animations shadows

app/screens/onboarding/index.tsx

@@ -2,13 +2,13 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useRef, useState} from 'react';
-import {Platform, Text, View, FlatList, Animated, ListRenderItemInfo, ViewToken} from 'react-native';
+import {Platform, View, FlatList, Animated, ListRenderItemInfo} from 'react-native';
 import {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
 import {generateId} from '@app/utils/general';
 import Background from '@screens/background';
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {makeStyleSheetFromTheme} from '@utils/theme';
 
 import Paginator from './paginator';
 import SlideItem from './slide';
@@ -29,6 +29,18 @@ const Onboarding = ({
     const [currentIndex, setCurrentIndex] = useState(0);
     const slidesRef = useRef(null);
 
+    const nextSlide = () => {
+        console.log('\n*** slidesRef 1\n');
+        if (slidesRef.current && currentIndex < slidesData.length - 1) {
+            console.log('\n*** slidesRef 2\n');
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            slidesRef.current.scrollToIndex({index: currentIndex + 1});
+        } else {
+            console.log('*** end of slide');
+        }
+    };
+
     const transform = useAnimatedStyle(() => {
         const duration = Platform.OS === 'android' ? 250 : 350;
         return {
@@ -84,6 +96,8 @@ const Onboarding = ({
             <Paginator
                 data={slidesData}
                 theme={theme}
+                scrollX={scrollX}
+                nextSlideHandler={nextSlide}
             />
         </View>
     );
@@ -94,6 +108,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
+        verticalAlign: 'top',
     },
     scrollContainer: {
         flex: 1,

app/screens/onboarding/paginator.tsx

@@ -2,38 +2,94 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {View} from 'react-native';
+import {View, Animated, useWindowDimensions} from 'react-native';
+import Button from 'react-native-button';
 
-import {makeStyleSheetFromTheme} from '@utils/theme';
+import CompassIcon from '@app/components/compass_icon';
+import FormattedText from '@app/components/formatted_text';
+import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 type Props = {
     data: any;
     theme: Theme;
+    scrollX: any;
+    nextSlideHandler: any;
 };
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     dot: {
-        height: 10,
+        height: 8,
         borderRadius: 5,
         backgroundColor: theme.buttonBg,
         marginHorizontal: 8,
-        width: 10,
+        width: 8,
+
+        // shadow
+        shadowOffset: {width: 0, height: 13},
+        shadowOpacity: 0.7,
+        shadowColor: theme.buttonBg,
+        shadowRadius: 6,
+        elevation: 3,
+    },
+    button: {
+        marginTop: 5,
+    },
+    rowIcon: {
+        color: theme.buttonColor,
+        fontSize: 12,
+        marginLeft: 5,
     },
 }));
 
-const Paginator = ({theme, data}: Props) => {
+const Paginator = ({theme, data, scrollX, nextSlideHandler}: Props) => {
     const styles = getStyleSheet(theme);
+    const {width} = useWindowDimensions();
 
     return (
-        <View style={{flexDirection: 'row', height: 64}}>
-            {data.map((item: any) => {
-                return (
-                    <View
-                        style={[styles.dot]}
-                        key={item.id}
+        <View style={{flexDirection: 'column', height: 150}}>
+            <View style={{flexDirection: 'row', height: 5}}>
+                {data.map((item: any, i: number) => {
+                    const inputRange = [(i - 1) * width, i * width, (i + 1) * width];
+
+                    const opacity = scrollX.interpolate({
+                        inputRange,
+                        outputRange: [0.3, 1, 0.3],
+                        extrapolate: 'clamp',
+                    });
+
+                    return (
+                        <Animated.View
+                            style={[styles.dot, {
+                                shadowOffset: {width: 0, height: 13},
+                                shadowOpacity: 0.7,
+                                shadowColor: theme.buttonBg,
+                                shadowRadius: 6,
+                                elevation: 3,
+                                opacity,
+                            }]}
+                            key={item.id}
+                        />
+                    );
+                })}
+            </View>
+            <View style={{marginTop: 15}}>
+                <Button
+                    testID='mobile.onboaring.next'
+                    onPress={() => nextSlideHandler()}
+                    containerStyle={[styles.button, buttonBackgroundStyle(theme, 'm', 'primary', 'default')]}
+                >
+                    <FormattedText
+                        id='mobile.onboarding.next'
+                        defaultMessage='Next'
+                        style={buttonTextStyle(theme, 'm', 'primary', 'default')}
                     />
-                );
-            })}
+                    <CompassIcon
+                        name='arrow-forward-ios'
+                        style={styles.rowIcon}
+                    />
+                </Button>
+            </View>
         </View>
     );
 };

app/screens/onboarding/slide.tsx

@@ -14,22 +14,27 @@ type Props = {
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     title: {
-        fontWeight: '800',
-        fontSize: 28,
-        marginBottom: 10,
+        fontWeight: '600',
+        fontSize: 40,
+        marginBottom: 5,
+        height: 100,
         color: theme.centerChannelColor,
         textAlign: 'center',
     },
     description: {
-        fontWeight: '300',
+        fontWeight: '400',
+        fontSize: 16,
         textAlign: 'center',
-        paddingHorizontal: 64,
+        paddingHorizontal: 20,
+        height: 80,
         color: changeOpacity(theme.centerChannelColor, 0.64),
         ...typography('Body', 200, 'Regular'),
     },
     image: {
-        flex: 0.7,
         justifyContent: 'center',
+        height: 60,
+        maxHeight: 120,
+        width: 50,
     },
     itemContainer: {
         flex: 1,