5 files changed, 49 insertions, 9 deletions
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 69697b20..c06845aa 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -1,4 +1,5 @@
 export {default as AuthProvider} from './authentication';
 export * from './authentication';
 export * from './onboarding';
+export * from './profile';
 export {default} from './Routes';
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx
new file mode 100644
index 00000000..faab0bde
--- /dev/null
+++ b/src/routes/profile/Profile.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {Image, StyleSheet} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {AvatarTitle} from '../../components';
+import {AVATAR_DIM, TAGGS_GRADIENT} from '../../constants';
+import {ProfileScreen, SocialMediaTaggs} from '../../screens';
+import {AuthContext} from '../authentication';
+import {ProfileStack} from './ProfileStack';
+
+const Profile: React.FC = () => {
+  return (
+    <ProfileStack.Navigator
+      initialRouteName="Profile"
+      screenOptions={{headerShown: false}}>
+      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
+      <ProfileStack.Screen
+        name="SocialMediaTaggs"
+        component={SocialMediaTaggs}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTintColor: 'white',
+          headerTitle: () => <AvatarTitle />,
+        }}
+      />
+    </ProfileStack.Navigator>
+  );
+};
+
+export default Profile;
diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
new file mode 100644
index 00000000..9a39aa97
--- /dev/null
+++ b/src/routes/profile/ProfileStack.tsx
@@ -0,0 +1,11 @@
+import {createStackNavigator} from '@react-navigation/stack';
+
+export type ProfileStackParams = {
+  Profile: undefined;
+  SocialMediaTaggs: {
+    socialMediaType: string;
+    socialMediaHandle: string;
+  };
+};
+
+export const ProfileStack = createStackNavigator<ProfileStackParams>();
diff --git a/src/routes/profile/index.ts b/src/routes/profile/index.ts
new file mode 100644
index 00000000..367f4cc6
--- /dev/null
+++ b/src/routes/profile/index.ts
@@ -0,0 +1,2 @@
+export * from './ProfileStack';
+export {default} from './Profile';
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index d36b02ae..456e923f 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -1,13 +1,8 @@
-import React from 'react';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import React from 'react';
 import {NavigationIcon} from '../../components';
-import {
-  ProfileScreen,
-  SearchScreen,
-  Home,
-  Notifications,
-  Upload,
-} from '../../screens';
+import {Home, Notifications, SearchScreen, Upload} from '../../screens';
+import Profile from '../profile';
 
 const Tabs = createBottomTabNavigator();
 
@@ -65,7 +60,7 @@ const NavigationBar: React.FC = () => {
       <Tabs.Screen name="Search" component={SearchScreen} />
       <Tabs.Screen name="Upload" component={Upload} />
       <Tabs.Screen name="Notifications" component={Notifications} />
-      <Tabs.Screen name="Profile" component={ProfileScreen} />
+      <Tabs.Screen name="Profile" component={Profile} />
     </Tabs.Navigator>
   );
 };