Pretty up code. Add all my default stuff that I like

app/(tabs)/_layout.tsx

@@ -1,21 +1,23 @@
 import { Tabs } from 'expo-router';
 import React from 'react';
 import { Platform } from 'react-native';
-
-import { HapticTab } from '@/components/HapticTab';
+import { HapticTab } from '@/components/default/HapticTab';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 import TabBarBackground from '@/components/ui/TabBarBackground';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
-export default function TabLayout() {
-  const colorScheme = useColorScheme();
+const TabLayout = () => {
+  const scheme = useColorScheme() ?? 'dark';
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarActiveTintColor: Colors[scheme].tint,
         headerShown: false,
+        headerStyle: {
+          backgroundColor: Colors[scheme].background,
+        },
         tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
         tabBarStyle: Platform.select({
@@ -23,7 +25,11 @@ export default function TabLayout() {
             // Use a transparent background on iOS to show the blur effect
             position: 'absolute',
           },
-          default: {},
+          default: {
+            backgroundColor: Colors[scheme].background,
+            borderTopColor: Colors[scheme].tint,
+            borderTopWidth: 1,
+          },
         }),
       }}
     >
@@ -35,12 +41,13 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name='explore'
+        name='settings'
         options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='paperplane.fill' color={color} />,
+          title: 'Settings',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name='gearshape.fill' color={color} />,
         }}
       />
     </Tabs>
   );
-}
+};
+export default TabLayout;

app/(tabs)/index.tsx

@@ -1,14 +1,12 @@
 import { Image, StyleSheet, Platform } from 'react-native';
+import ParallaxScrollView from '@/components/default/ParallaxScrollView';
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
 
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-export default function HomeScreen() {
+const HomeScreen = () => {
   return (
     <ParallaxScrollView
       headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
+      headerHeight={200}
       headerImage={
         <Image
           source={require('@/assets/images/partial-react-logo.png')}
@@ -18,7 +16,6 @@ export default function HomeScreen() {
     >
       <ThemedView style={styles.titleContainer}>
         <ThemedText type='title'>Welcome!</ThemedText>
-        <HelloWave />
       </ThemedView>
       <ThemedView style={styles.stepContainer}>
         <ThemedText type='subtitle'>Step 1: Try it</ThemedText>
@@ -53,7 +50,8 @@ export default function HomeScreen() {
       </ThemedView>
     </ParallaxScrollView>
   );
-}
+};
+export default HomeScreen;
 
 const styles = StyleSheet.create({
   titleContainer: {

app/(tabs)/settings.tsx

@@ -1,27 +1,21 @@
 import { StyleSheet, Image, Platform } from 'react-native';
-
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { Collapsible } from '@/components/default/Collapsible';
+import { ExternalLink } from '@/components/default/ExternalLink';
+import ParallaxScrollView from '@/components/default/ParallaxScrollView';
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 
-export default function TabTwoScreen() {
+const TabTwoScreen = () => {
   return (
     <ParallaxScrollView
       headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
+      headerHeight={150}
       headerImage={
-        <IconSymbol
-          size={310}
-          color='#808080'
-          name='chevron.left.forwardslash.chevron.right'
-          style={styles.headerImage}
-        />
+        <IconSymbol size={200} color='#808080' name='gear.circle' style={styles.headerImage} />
       }
     >
       <ThemedView style={styles.titleContainer}>
-        <ThemedText type='title'>Explore</ThemedText>
+        <ThemedText type='title'>Settings</ThemedText>
       </ThemedView>
       <ThemedText>This app includes example code to help you get started.</ThemedText>
       <Collapsible title='File-based routing'>
@@ -94,7 +88,8 @@ export default function TabTwoScreen() {
       </Collapsible>
     </ParallaxScrollView>
   );
-}
+};
+export default TabTwoScreen;
 
 const styles = StyleSheet.create({
   headerImage: {

app/+not-found.tsx

@@ -1,22 +1,22 @@
 import { Link, Stack } from 'expo-router';
 import { StyleSheet } from 'react-native';
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
+import TextButton from '@/components/theme/buttons/TextButton';
 
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-export default function NotFoundScreen() {
+const NotFoundScreen = () => {
   return (
     <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
+      <Stack.Screen options={{ title: 'Page not found' }} />
       <ThemedView style={styles.container}>
         <ThemedText type='title'>This screen doesn't exist.</ThemedText>
-        <Link href='/' style={styles.link}>
-          <ThemedText type='link'>Go to home screen!</ThemedText>
+        <Link href='/'>
+          <TextButton width={200} height={45} text='Go to home screen' fontSize={24} />
         </Link>
       </ThemedView>
     </>
   );
-}
+};
+export default NotFoundScreen;
 
 const styles = StyleSheet.create({
   container: {
@@ -25,8 +25,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     padding: 20,
   },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
 });

app/_layout.tsx

@@ -5,14 +5,13 @@ import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 import { useEffect } from 'react';
 import 'react-native-reanimated';
-
 import { useColorScheme } from '@/hooks/useColorScheme';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
-export default function RootLayout() {
-  const colorScheme = useColorScheme();
+const RootLayout = () => {
+  const scheme = useColorScheme() ?? 'dark';
   const [loaded] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
   });
@@ -28,7 +27,7 @@ export default function RootLayout() {
   }
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+    <ThemeProvider value={scheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
         <Stack.Screen name='+not-found' />
@@ -36,4 +35,5 @@ export default function RootLayout() {
       <StatusBar style='auto' />
     </ThemeProvider>
   );
-}
+};
+export default RootLayout;