[TMA-335] Fixed social linking for non-integrated during onboarding (#102)

* handled linker logic and uses soical linking service

* Fixed layout

1 files changed, 27 insertions, 51 deletions

diff --git a/src/screens/onboarding/SocialMedia.tsx b/src/screens/onboarding/SocialMedia.tsx
index 868368e3..57270e4e 100644
--- a/src/screens/onboarding/SocialMedia.tsx
+++ b/src/screens/onboarding/SocialMedia.tsx
@@ -1,24 +1,23 @@
+import {RouteProp} from '@react-navigation/native';
 import React from 'react';
 import {
-  StyleSheet,
-  View,
-  TouchableOpacity,
-  Text,
-  StatusBar,
+  Alert,
   KeyboardAvoidingView,
   Platform,
-  Alert,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
 } from 'react-native';
+import {LinkerType} from 'src/types';
 import {
   Background,
-  RegistrationWizard,
   LinkSocialMedia,
+  RegistrationWizard,
 } from '../../components';
-import {LinkerType} from 'src/types';
 import {SOCIAL_LIST} from '../../constants/';
-import {OnboardingStackParams, AuthContext} from '../../routes';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
+import {AuthContext, OnboardingStackParams} from '../../routes';
 
 /**
  * Social Media Screen for displaying social media linkers
@@ -26,22 +25,13 @@ import {StackNavigationProp} from '@react-navigation/stack';
 
 type SocialMediaRouteProps = RouteProp<OnboardingStackParams, 'SocialMedia'>;
 
-type SocialMediaNavigationProp = StackNavigationProp<
-  OnboardingStackParams,
-  'SocialMedia'
->;
-
 interface SocialMediaProps {
   route: SocialMediaRouteProps;
-  navigation: SocialMediaNavigationProp;
 }
 
-const SocialMedia: React.FC<SocialMediaProps> = ({route, navigation}) => {
+const SocialMedia: React.FC<SocialMediaProps> = ({route}) => {
   const {userId, username} = route.params;
   const linkers: Array<LinkerType> = [];
-  const [state, setState] = React.useState({
-    showMore: false,
-  });
 
   /**
    * login: determines if user successully created an account to
@@ -80,11 +70,11 @@ const SocialMedia: React.FC<SocialMediaProps> = ({route, navigation}) => {
   return (
     <Background style={styles.container}>
       <StatusBar barStyle="light-content" />
-      <RegistrationWizard style={styles.wizard} step="seven" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
-        <View style={{marginBottom: '30%'}}>
+        <RegistrationWizard style={styles.wizard} step="seven" />
+        <View style={styles.headerContainer}>
           <Text style={styles.header}>SOCIAL MEDIA</Text>
           <Text style={styles.subtext}>
             Select the social media you want to add
@@ -107,13 +97,24 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'space-around',
+  },
+  headerContainer: {
+    marginTop: '28%',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
   },
   linkerContainer: {
-    position: 'relative',
     bottom: '15%',
     flexDirection: 'row',
-    height: '25%',
     flexWrap: 'wrap',
     justifyContent: 'center',
     alignContent: 'center',
@@ -125,7 +126,6 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     textAlign: 'center',
     marginBottom: '4%',
-    marginHorizontal: '10%',
   },
   subtext: {
     color: '#fff',
@@ -135,25 +135,6 @@ const styles = StyleSheet.create({
     marginBottom: '35%',
     marginHorizontal: '10%',
   },
-  // show: {
-  //   borderColor: '#fff',
-  //   borderWidth: 1,
-  //   borderRadius: 3,
-  //   paddingHorizontal: '2%',
-  //   paddingVertical: '1%',
-  //   marginVertical: '3%',
-  //   marginLeft: '65%',
-  // },
-  wizard: {
-    ...Platform.select({
-      ios: {
-        top: 50,
-      },
-      android: {
-        bottom: 40,
-      },
-    }),
-  },
   loginButton: {
     backgroundColor: '#8F01FF',
     justifyContent: 'center',
@@ -170,11 +151,6 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#ddd',
   },
-  form: {
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flex: 3,
-  },
 });
 
 export default SocialMedia;