welcome screen done, created base view for upload image

3 files changed, 110 insertions, 5 deletions

diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx
new file mode 100644
index 00000000..834fda9f
--- /dev/null
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {StatusBar, StyleSheet} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {TaggSquareButton} from '../../components';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+const SuggestedPeopleUploadPictureScreen: React.FC = () => {
+  return (
+    <>
+      <StatusBar barStyle={'light-content'} />
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.body}>FOoooooo</Text>
+        {/* <TaggSquareButton onPress={() => {}} title={'done'} /> */}
+      </SafeAreaView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#878787',
+    alignItems: 'center',
+  },
+  body: {
+    fontSize: normalize(20),
+    lineHeight: normalize(25),
+    textAlign: 'center',
+    fontWeight: '700',
+    color: 'white',
+    marginTop: '5%',
+    width: SCREEN_WIDTH * 0.8,
+  },
+});
+export default SuggestedPeopleUploadPictureScreen;
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
index da6adc59..10f3b3a5 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
@@ -1,14 +1,81 @@
+import {BlurView} from '@react-native-community/blur';
+import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {StyleSheet, Text} from 'react-native';
+import {Image, StatusBar, StyleSheet, TouchableOpacity} from 'react-native';
+import {Text} from 'react-native-animatable';
 import {SafeAreaView} from 'react-native-safe-area-context';
+import UpArrow from '../../assets/icons/up_arrow.svg';
+import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 const SuggestedPeopleWelcomeScreen: React.FC = () => {
+  const navigation = useNavigation();
   return (
-    <SafeAreaView>
-      <Text>Welcome!</Text>
-    </SafeAreaView>
+    <>
+      <StatusBar barStyle={'light-content'} />
+      <Image
+        style={styles.backgroundImage}
+        source={
+          isIPhoneX()
+            ? require('../../assets/images/suggested-people-preview-large.png')
+            : require('../../assets/images/suggested-people-preview-small.png')
+        }
+        resizeMode={'cover'}
+      />
+      <BlurView blurType={'light'} blurAmount={1}>
+        <SafeAreaView style={styles.container}>
+          <Image
+            style={styles.logo}
+            source={require('../../assets/images/tagg-logo.png')}
+          />
+          <Text style={styles.body}>
+            Welcome to the suggested people's page where you can discover new
+            people!{'\n\n'}Let's get you set up!
+          </Text>
+        </SafeAreaView>
+      </BlurView>
+      <TouchableOpacity
+        style={styles.nextButton}
+        onPress={() => navigation.push('UploadPicture')}>
+        <UpArrow color={'white'} />
+      </TouchableOpacity>
+    </>
   );
 };
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+  backgroundImage: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    position: 'absolute',
+  },
+  container: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0,0,0,0.65)',
+    alignItems: 'center',
+  },
+  logo: {
+    width: normalize(120),
+    height: normalize(120),
+    marginTop: '25%',
+  },
+  body: {
+    fontSize: normalize(20),
+    lineHeight: normalize(25),
+    textAlign: 'center',
+    fontWeight: '700',
+    color: 'white',
+    marginTop: '5%',
+    width: SCREEN_WIDTH * 0.8,
+  },
+  nextButton: {
+    position: 'absolute',
+    color: 'white',
+    transform: [{rotate: '90deg'}],
+    width: normalize(70),
+    aspectRatio: 0.86,
+    bottom: SCREEN_HEIGHT * 0.1,
+    right: '5%',
+  },
+});
 export default SuggestedPeopleWelcomeScreen;
diff --git a/src/screens/suggestedPeopleOnboarding/index.ts b/src/screens/suggestedPeopleOnboarding/index.ts
index 6adbb75d..2a349cf7 100644
--- a/src/screens/suggestedPeopleOnboarding/index.ts
+++ b/src/screens/suggestedPeopleOnboarding/index.ts
@@ -1 +1,2 @@
 export {default as SuggestedPeopleWelcomeScreen} from './SuggestedPeopleWelcomeScreen';
+export {default as SuggestedPeopleUpdatePictureScreen} from './SuggestedPeopleUpdatePictureScreen';