1 files changed, 94 insertions, 0 deletions
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
new file mode 100644
index 00000000..fcdd9bc5
--- /dev/null
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native';
+import {SCREEN_WIDTH} from '../../utils';
+import {Background} from '../../components';
+import {OnboardingStackParams} from '../../routes';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {BackgroundGradientType} from '../../types';
+
+type WelcomeScreenNavigationProps = StackNavigationProp<
+  OnboardingStackParams,
+  'WelcomeScreen'
+>;
+
+interface WelcomeScreenProps {
+  navigation: WelcomeScreenNavigationProps;
+}
+
+const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
+  const handleNext = () => {
+    navigation.navigate('InvitationCodeVerification');
+  };
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <Image
+        source={require('../../assets/images/welcome.png')}
+        style={styles.image}
+      />
+
+      <View>
+        <Text style={styles.header}>Welcome to TAGG!</Text>
+        <Text style={styles.subtext}>
+          This is the new social networking platform for you! It will help you
+          create your own personalized digital space where you can express who
+          you are, along with all the moments that comprehensively define you!
+        </Text>
+      </View>
+      <TouchableOpacity onPress={handleNext} style={styles.nextButton}>
+        <Text style={styles.nextButtonLabel}>Next</Text>
+      </TouchableOpacity>
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    /**
+     * Set primary axis to column
+     * Align items to centre along that primary axis and the secondary axis as well
+     */
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
+  },
+  header: {
+    color: '#fff',
+    fontSize: 32,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '4%',
+    marginHorizontal: '10%',
+  },
+  subtext: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '15%',
+    marginHorizontal: '10%',
+  },
+  nextButton: {
+    backgroundColor: '#8F01FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '70%',
+    height: '10%',
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#8F01FF',
+    marginBottom: '15%',
+  },
+  nextButtonLabel: {
+    fontSize: 30,
+    fontWeight: '500',
+    color: '#ddd',
+  },
+});
+export default WelcomeScreen;