3 files changed, 121 insertions, 12 deletions
diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx
new file mode 100644
index 00000000..9606eacb
--- /dev/null
+++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {StyleSheet, Text, View} from 'react-native';
+import {Image} from 'react-native-animatable';
+import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation} from '@react-navigation/native';
+import {useDispatch, useSelector} from 'react-redux';
+import {RootState} from '../../store/rootReducer';
+import {updateSPSwipeTutorial} from '../../store/actions/user';
+
+const AnimatedTutorial: React.FC = () => {
+  const navigation = useNavigation();
+  const dispatch = useDispatch();
+  const {user} = useSelector((state: RootState) => state.user);
+
+  const handleCloseAnimationTutorial = async () => {
+    /* In user's store, check if profile.sp_swipe_tutorial === 0
+     * Make call to edit profile endpoint with suggested people === 1
+     */
+    const data = 1;
+    await dispatch(updateSPSwipeTutorial(user, data));
+    navigation.pop();
+  };
+  return (
+    <SafeAreaView>
+      <View style={styles.container}>
+        <CloseIcon
+          height={'10%'}
+          width={'10%'}
+          color={'white'}
+          style={styles.closeButton}
+          onPress={handleCloseAnimationTutorial}
+        />
+        <View style={styles.textContainer}>
+          <Text style={styles.text}>{'Swipe up to discover more people!'}</Text>
+        </View>
+        <Image
+          source={require('../../assets/gifs/swipe-animation.gif')}
+          style={styles.swipeGif}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+  },
+  closeButton: {
+    top: '2.55%',
+    left: '5%',
+  },
+  text: {
+    justifyContent: 'center',
+    color: '#fff',
+    fontWeight: 'bold',
+    fontSize: 20,
+    textAlign: 'center',
+    position: 'relative',
+    top: '100%',
+  },
+  textContainer: {
+    width: isIPhoneX() ? SCREEN_WIDTH * 0.5 : SCREEN_WIDTH * 0.6,
+    alignSelf: 'center',
+    top: isIPhoneX() ? '65%' : '45%',
+  },
+  swipeGif: {
+    width: 333,
+    height: 250,
+    left: '22.5%',
+    top: isIPhoneX() ? '75%' : '45%',
+  },
+
+  //Styles to adjust moment container
+  momentScrollContainer: {
+    backgroundColor: 'transparent',
+  },
+  momentContainer: {
+    top: '62%',
+    backgroundColor: 'transparent',
+  },
+  momentHeaderText: {
+    paddingBottom: '5%',
+  },
+  momentHeader: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default AnimatedTutorial;
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index fffaf715..4d0a9bd5 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, {useCallback} from 'react';
 import {
   StatusBar,
   StyleSheet,
@@ -7,20 +7,15 @@ import {
   View,
 } from 'react-native';
 import {Image} from 'react-native-animatable';
-import {
-  fetchUserX,
-  isIPhoneX,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-  userXInStore,
-} from '../../utils';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {TabsGradient, TaggsBar} from '../../components';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {normalize} from '../../utils';
 import Animated from 'react-native-reanimated';
 import {ScreenType} from '../../types';
-import {useDispatch, useStore} from 'react-redux';
+import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
 
 /**
  * Bare bones for suggested people consisting of:
@@ -33,6 +28,25 @@ const SuggestedPeopleScreen: React.FC = () => {
 
   // Adviced to maintain username as a variable here to append @ symbol for maintainability
   const username = '@' + 'sarahmiller';
+  const navigation = useNavigation();
+  const screenType = ScreenType.SuggestedPeople;
+  const {
+    profile: {sp_swipe_tutorial},
+  } = useSelector((state: RootState) => state.user);
+
+  useFocusEffect(
+    useCallback(() => {
+      const navigateToAnimatedTutorial = () => {
+        /* In user's store, check if profile.sp_swipe_tutorial === 0
+         * If, true show tutorial.
+         */
+        if (sp_swipe_tutorial === 0) {
+          navigation.navigate('AnimatedTutorial');
+        }
+      };
+      navigateToAnimatedTutorial();
+    }, [sp_swipe_tutorial, navigation]),
+  );
 
   return (
     <>
@@ -46,7 +60,7 @@ const SuggestedPeopleScreen: React.FC = () => {
         <View style={styles.mainContainer}>
           <Text style={styles.title}>Suggested People</Text>
           <View style={styles.body}>
-            {/* Added first row contaning name, username, add button (w/o functionality) */}
+            {/* First row contaning name, username, add button (w/o functionality) */}
             <View style={styles.addUserContainer}>
               <View style={styles.nameInfoContainer}>
                 <Text style={styles.firstName}>{firstName}</Text>
@@ -54,18 +68,20 @@ const SuggestedPeopleScreen: React.FC = () => {
               </View>
               <TouchableOpacity
                 activeOpacity={0.5}
+                // TODO: Call function to Add Friend
                 onPress={() => console.log('Call add friend function')}>
                 <View style={styles.addButton}>
                   <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
                 </View>
               </TouchableOpacity>
             </View>
-            {/* TODO: Add TaggsBar here */}
+            {/* Taggs Bar. Displays only linked profiles for user while viewing their own profile. */}
             <TaggsBar
               y={Animated.useValue(0)}
+              // :: For testing purposes, to view user's own profile, pass userXId=''
               userXId={''}
               profileBodyHeight={0}
-              screenType={ScreenType.SuggestedPeople}
+              screenType={screenType}
             />
             {/* TODO: Add MutualFriends here */}
           </View>
diff --git a/src/screens/suggestedPeople/index.ts b/src/screens/suggestedPeople/index.ts
index a42d9c52..8c06d81e 100644
--- a/src/screens/suggestedPeople/index.ts
+++ b/src/screens/suggestedPeople/index.ts
@@ -1 +1,2 @@
 export {default as SuggestedPeopleScreen} from './SuggestedPeopleScreen';
+export {default as AnimatedTutorial} from './AnimatedTutorial';