3 files changed, 93 insertions, 0 deletions
diff --git a/src/assets/gifs/swipe-animation.gif b/src/assets/gifs/swipe-animation.gif
new file mode 100644
index 00000000..b3b203d0
--- /dev/null
+++ b/src/assets/gifs/swipe-animation.gif
diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx
new file mode 100644
index 00000000..9993875d
--- /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 {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: SCREEN_WIDTH * 0.5,
+    alignSelf: 'center',
+    top: '65%',
+  },
+  swipeGif: {
+    width: 333,
+    height: 250,
+    left: '22.5%',
+    top: '75%',
+  },
+
+  //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/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';