fixing sing up flow now using an email code to verify.. on sign up we create user in backend that has reference to clerkID for filtering posts later

app/(tabs)/_layout.tsx

@@ -1,8 +1,11 @@
+import { useUser } from '@clerk/clerk-react'
 import Ionicons from '@expo/vector-icons/Ionicons'
 import { Tabs } from 'expo-router'
 import React from 'react'
 
 export default function TabLayout() {
+    const { user } = useUser()
+
     return (
         <Tabs
             screenOptions={{
@@ -34,7 +37,8 @@ export default function TabLayout() {
                     headerShown: false,
                     tabBarIcon: ({ color, focused }) => (
                         <Ionicons name={focused ? 'rocket-sharp' : 'rocket-outline'} size={24} color={color} />
-                    )
+                    ),
+                    tabBarItemStyle: { display: user?.publicMetadata.role === 'admin' ? 'flex' : 'none' }
                 }}
             />
             <Tabs.Screen

app/(tabs)/profile.tsx

@@ -71,7 +71,6 @@ const styles = StyleSheet.create({
     },
     profileInfoCard: {
         backgroundColor: '#373d44ff',
-        flex: 0.25,
         marginTop: 12,
         borderColor: '#626e7aff',
         borderStyle: 'solid',
@@ -79,25 +78,24 @@ const styles = StyleSheet.create({
         borderRadius: 12
     },
     profilePic: {
-        flex: 0.4,
         marginTop: 12,
         display: 'flex',
         alignItems: 'center'
     },
     image: {
         height: 75,
-        width: 75
+        width: 75,
+        borderRadius: 37.5
     },
-    nameContainer: { flex: 0.3, display: 'flex', alignItems: 'center' },
+    nameContainer: { display: 'flex', alignItems: 'center' },
     text: {
         color: 'white',
         fontSize: 16,
         marginTop: 6
     },
     buttonLayout: {
-        flex: 0.2,
         alignItems: 'center',
-        marginTop: 12
+        marginVertical: 12
     },
     userPostsCard: {
         flex: 1