working out top of profile page w name, email, image, and sign out button.

app/(tabs)/posts.tsx

@@ -123,8 +123,7 @@ export default function PostsScreen() {
 const styles = StyleSheet.create({
     wrapper: {
         flex: 1,
-        backgroundColor: '#25292e',
-        padding: 5
+        backgroundColor: '#25292e'
     },
     container: {
         flex: 1,

app/(tabs)/profile.tsx

@@ -4,23 +4,28 @@ import { Image, StyleSheet, Text, View } from 'react-native'
 import { SignOutButton } from '../components/SignOutButton'
 
 export default function PostsScreen() {
-    const user = useUser().user
-    console.log(user?.emailAddresses)
+    const { user } = useUser()
+    console.log(user?.imageUrl)
     return (
-        <View style={styles.wrapper}>
-            <View>
-                <Image></Image>
+        <>
+            <View style={styles.wrapper}>
+                <View style={styles.profileInfoCard}>
+                    <View style={styles.profilePic}>
+                        <Image source={{ uri: user?.imageUrl }} style={styles.image}></Image>
+                    </View>
+                    <View style={styles.nameContainer}>
+                        <Text style={styles.text}>
+                            {user?.firstName} {user?.lastName}
+                        </Text>
+                        <Text style={styles.text}>{user?.emailAddresses[0].emailAddress}</Text>
+                    </View>
+                    <View style={styles.buttonLayout}>
+                        <SignOutButton></SignOutButton>
+                    </View>
+                </View>
+                <View style={styles.userPostsCard}></View>
             </View>
-            <View style={styles.nameContainer}>
-                <Text style={styles.text}>
-                    {user?.firstName} {user?.lastName}
-                </Text>
-                <Text style={styles.text}>{user?.emailAddresses[0].emailAddress}</Text>
-            </View>
-            <View style={styles.buttonLayout}>
-                <SignOutButton></SignOutButton>
-            </View>
-        </View>
+        </>
     )
 }
 
@@ -28,17 +33,45 @@ const styles = StyleSheet.create({
     wrapper: {
         flex: 1,
         backgroundColor: '#25292e',
-        padding: 5
+        padding: 16
     },
-    nameContainer: { display: 'flex', alignItems: 'center' },
+    profileInfoCard: {
+        backgroundColor: '#373d44ff',
+        flex: 0.25,
+        marginTop: 12,
+        borderColor: '#626e7aff',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderRadius: 12
+    },
+    profilePic: {
+        flex: 0.4,
+        marginTop: 12,
+        display: 'flex',
+        alignItems: 'center'
+    },
+    image: {
+        height: 75,
+        width: 75
+    },
+    nameContainer: { flex: 0.3, display: 'flex', alignItems: 'center' },
     text: {
         color: 'white',
         fontSize: 16,
         marginTop: 6
     },
     buttonLayout: {
-        flex: 1,
+        flex: 0.2,
         alignItems: 'center',
         marginTop: 12
+    },
+    userPostsCard: {
+        backgroundColor: '#373d44ff',
+        flex: 0.75,
+        marginTop: 12,
+        borderColor: '#626e7aff',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderRadius: 12
     }
 })

app/components/Post.tsx

@@ -0,0 +1,3 @@
+export const Post = () => {
+    return null
+}

app/components/SignOutButton.tsx

@@ -26,7 +26,7 @@ export const SignOutButton = () => {
 const styles = StyleSheet.create({
     button: {
         width: '40%',
-        height: '5%',
+        height: '100%',
         backgroundColor: 'rgba(192, 196, 199, 1)',
         borderRadius: 5,
         alignItems: 'center',

app/index.tsx

@@ -1,10 +1,8 @@
-import { SignedIn, SignedOut, useUser } from '@clerk/clerk-expo'
+import { SignedIn, SignedOut } from '@clerk/clerk-expo'
 import { Redirect } from 'expo-router'
 import { View } from 'react-native'
 
 export default function Page() {
-    const { user } = useUser()
-
     return (
         <View>
             <SignedIn>