work on profile page

app/profile.js

-import { Pressable, StyleSheet, Text, Button, View, Appearance, useColorScheme } from "react-native";
+import { Pressable, StyleSheet, Text, Button, View, Appearance, useColorScheme, Image } from "react-native";
 import { Link } from "expo-router";
 import { StatusBar } from 'expo-status-bar';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from 'react-native-reanimated';
+import { BarChart } from "react-native-chart-kit";
 
 export default function profile() {
 
@@ -11,17 +11,50 @@ export default function profile() {
     const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
     const themeContainerStyle =
         colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
-
+    
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+            datasets: [
+                {
+                    data: [20, 45, 28, 80, 99, 43],
+                },
+            ],
+            legend: ['Rainy Days']
+    };
 
     return (
         <SafeAreaProvider>
             <View style={[styles.container, themeContainerStyle]}>
-                <Text style={[styles.text, themeTextStyle]}>This is profile page</Text>
-                <Link replace href="/" asChild>
-                    <Pressable>
-                        <Text style={[styles.text, themeTextStyle]}>Press this to go to home page</Text>
-                    </Pressable>
-                </Link>
+                <View style={styles.header}>
+                    <Image style={styles.avatar} source={{ uri: 'https://www.bootdey.com/img/Content/avatar/avatar6.png' }} />
+                    <View style={styles.info}>
+                        <Text style={styles.name}>John Doe</Text>
+                        <Text style={styles.username}>@johndoe</Text>
+                        {/* TODO: edit profile should lead to a page to edit profile */}
+                        <Button title="Edit Profile" onPress={() => { }} />
+                    </View>
+                </View>
+                <View style={styles.stats}>
+                    <View style={styles.stat}>
+                        <Text style={styles.statLabel}>Tweets</Text>
+                        <Text style={styles.statValue}>1,234</Text>
+                    </View>
+                    <View style={styles.stat}>
+                        <Text style={styles.statLabel}>Following</Text>
+                        <Text style={styles.statValue}>123</Text>
+                    </View>
+                    <View style={styles.stat}>
+                        <Text style={styles.statLabel}>Followers</Text>
+                        <Text style={styles.statValue}>456</Text>
+                    </View>
+                </View>
+                {/* TODO: BUG */}
+                <BarChart
+                    data={data}
+                    height={220}
+                    yAxisLabel="$"
+                    verticalLabelRotation={30}
+                />
                 <StatusBar style="auto" />
             </View>
         </SafeAreaProvider>
@@ -30,10 +63,54 @@ export default function profile() {
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
         backgroundColor: '#fff',
+        flex: 1,
+    },
+    chart: {
+        width: 200,
+        height: 200,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 20,
+    },
+    avatar: {
+        width: 125,
+        height: 125,
+        borderRadius: 75,
+    },
+    info: {
+        marginLeft: 20,
+    },
+    name: {
+        fontSize: 24,
+        fontWeight: 'bold',
+    },
+    username: {
+        color: '#999',
+        fontSize: 18,
+    },
+    stats: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 20,
+    },
+    stat: {
+        flex: 1,
         alignItems: 'center',
-        justifyContent: 'center',
+    },
+    statLabel: {
+        color: '#999',
+        fontSize: 14,
+    },
+    statValue: {
+        fontSize: 18,
+    },
+    bio: {
+        padding: 20,
+        fontSize: 16,
+        color: '#333',
     },
     lightContainer: {
         // white
@@ -51,10 +128,4 @@ const styles = StyleSheet.create({
         // black
         color: '#FFFFFF',
     },
-    box: {
-        width: 100,
-        height: 80,
-        backgroundColor: '#528AF6',
-        margin: 30,
-    },
 });

package.json

@@ -9,21 +9,23 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/webpack-config": "^18.1.3",
     "expo": "^49.0.16",
+    "expo-constants": "~14.4.2",
+    "expo-linking": "~5.0.2",
+    "expo-router": "^2.0.10",
     "expo-status-bar": "~1.6.0",
     "expo-system-ui": "~2.4.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.5",
+    "react-native-chart": "^0.1.14",
+    "react-native-chart-kit": "^6.12.0",
+    "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
-    "react-native-web": "~0.19.6",
-    "expo-router": "^2.0.0",
     "react-native-screens": "~3.22.0",
-    "expo-linking": "~5.0.2",
-    "expo-constants": "~14.4.2",
-    "react-native-gesture-handler": "~2.12.0",
-    "@expo/webpack-config": "^19.0.0"
+    "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",