Profile Screen Navigation and Data Fetch/Send DONE

App.js

@@ -5,6 +5,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 import Login from './screens/Login';
 import Register from './screens/Register';
 import Dashboard from './screens/Dashboard';
+import ProfileScreen from './screens/ProfileScreen';
 import { NavigationContainer } from '@react-navigation/native';
 import { loginValidation } from "./utils/Validation";
 import { AccessToken, LoginManager } from "react-native-fbsdk-next";
@@ -123,7 +124,7 @@ export default App = ({navigation}) => {
                               console.log("Something went wrong obtaining access token");
                               return; 
                             }                       
-                        const userFb = await axios.get(`https://graph.facebook.com/${data.userID}?fields=id,name,email,picture&access_token=${data.accessToken}`);
+                        const userFb = await axios.get(`https://graph.facebook.com/${data.userID}?fields=id,name,email,picture.type(large)&access_token=${data.accessToken}`);
 
                         const {name, email, picture} = userFb.data;
                         const img = picture.data.url;
@@ -227,7 +228,8 @@ export default App = ({navigation}) => {
                     </>
                 ): (
                     <>
-                        <Stack.Screen name="Dashboard" component={Dashboard} />  
+                        <Stack.Screen name="Dashboard" component={Dashboard} />
+                        <Stack.Screen name="ProfileScreen" component={ProfileScreen} />  
                     </>
                 )}
             </Stack.Navigator>

screens/Dashboard.js

@@ -4,7 +4,7 @@ import MusicPlayer from "../components/MusicPlayer";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import HelloMessage from "../components/HelloMessage";
 
-export default function Dashboard() {
+export default function Dashboard({navigation}) {
     var user;
     const [email, setEmail] = useState('email');
     const [id, setId] = useState('id');
@@ -44,6 +44,10 @@ export default function Dashboard() {
           <Text>{name}</Text>
         </View> */}
         <HelloMessage name={name}/>
+        <TouchableOpacity onPress={() => {
+          navigation.navigate('ProfileScreen', {email: email, name: name, img: img})}}>
+          <Text>Profile</Text>
+        </TouchableOpacity>
         <MusicPlayer />
       </View>
     )

screens/ProfileScreen.js

@@ -0,0 +1,63 @@
+import React, { useEffect } from "react";
+import {View, Text, SafeAreaView, Image, StyleSheet, ScrollView} from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import Ionicons from "react-native-vector-icons/Ionicons";
+
+export default function ProfileScreen({route, navigation}) {
+
+    const {email, name, img} = route.params;
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <ScrollView showsVerticalScrollIndicator={false}>
+                <View style={styles.titleBar}>
+                    <TouchableOpacity onPress={() => {
+                        if(navigation.canGoBack()) {
+                            navigation.goBack();
+                        }
+                    }} >
+                        <Ionicons name={"arrow-back"} size={24} color="#52575D" />
+                    </TouchableOpacity>
+                    <Ionicons name={"md-menu"} size={24} color="#52575D" />
+                </View>
+
+                <View style={{alignSelf: 'center'}}>
+                    <View style={styles.profileImage}>
+                        <Image source={{uri: img}} style={styles.image} resizeMode="contain"></Image>
+                    </View>
+                    <Text>{name}</Text>
+                    <Text>{email}</Text>
+                </View>
+
+            </ScrollView>
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor:'#fff',
+    },
+    text: {
+        fontfamily:'HelveticaNeue',
+        color:'#52575D'
+    },
+    image: {
+        flex: 1,
+        width: undefined,
+        height: undefined,
+    },
+    titleBar: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 24,
+        marginHorizontal: 16
+    },
+    profileImage: {
+        width: 200,
+        height: 200,
+        borderRadius: 100,
+        overflow: "hidden"
+    }
+});