feat: add header and photo to profile screen

src/screens/Profile.tsx

@@ -1,9 +1,23 @@
-import { Center, Text } from "@gluestack-ui/themed";
+import { Center, Text, VStack } from '@gluestack-ui/themed';
+import { ScrollView } from 'react-native';
+
+import { ScreenHeader } from '@components/ScreenHeader';
+import { UserPhoto } from '@components/UserPhoto';
 
 export function Profile() {
   return (
-    <Center flex={1}>
-      <Text>Profile</Text>
-    </Center>
-  )
+    <VStack flex={1}>
+      <ScreenHeader title="Perfil" />
+
+      <ScrollView contentContainerStyle={{ paddingHorizontal: 36 }}>
+        <Center mt="$6" px="$10">
+          <UserPhoto
+            source={{ uri: 'https://i.pravatar.cc/200' }}
+            alt="imagem de perfil"
+            size="xl"
+          />
+        </Center>
+      </ScrollView>
+    </VStack>
+  );
 }