feat: create screen header component

src/components/ScreenHeader.tsx

@@ -0,0 +1,15 @@
+import { Center, Heading } from '@gluestack-ui/themed';
+
+type Props = {
+  title: string;
+};
+
+export function ScreenHeader({ title }: Props) {
+  return (
+    <Center bg="$gray600" pb="$6" pt="$16">
+      <Heading color="$gray100" fontSize="$xl">
+        {title}
+      </Heading>
+    </Center>
+  );
+}

src/screens/History.tsx

@@ -1,9 +1,10 @@
-import { Center, Text } from "@gluestack-ui/themed";
+import { ScreenHeader } from '@components/ScreenHeader';
+import { VStack } from '@gluestack-ui/themed';
 
 export function History() {
   return (
-    <Center flex={1}>
+    <VStack flex={1}>
-      <Text>History</Text>
+      <ScreenHeader title="Histórico" />
-    </Center>
+    </VStack>
-  )
+  );
 }