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/default/HapticTab';
-import { HapticTab } from '@/components/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 TabLayout = () => {
-  const colorScheme = useColorScheme();
+  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',
+          title: 'Settings',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='paperplane.fill' color={color} />,
+          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';
+const HomeScreen = () => {
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-export default function 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/default/Collapsible';
-import { Collapsible } from '@/components/Collapsible';
+import { ExternalLink } from '@/components/default/ExternalLink';
-import { ExternalLink } from '@/components/ExternalLink';
+import ParallaxScrollView from '@/components/default/ParallaxScrollView';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 
-export default function TabTwoScreen() {
+const TabTwoScreen = () => {
   return (
     <ParallaxScrollView
       headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
+      headerHeight={150}
       headerImage={
-        <IconSymbol
+        <IconSymbol size={200} color='#808080' name='gear.circle' style={styles.headerImage} />
-          size={310}
-          color='#808080'
-          name='chevron.left.forwardslash.chevron.right'
-          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';
+const NotFoundScreen = () => {
-import { ThemedView } from '@/components/ThemedView';
-
-export default function 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}>
+        <Link href='/'>
-          <ThemedText type='link'>Go to home screen!</ThemedText>
+          <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 RootLayout = () => {
-  const colorScheme = useColorScheme();
+  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;

components/HelloWave.tsx

@@ -1,40 +0,0 @@
-import { useEffect } from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  withRepeat,
-  withSequence,
-} from 'react-native-reanimated';
-
-import { ThemedText } from '@/components/ThemedText';
-
-export function HelloWave() {
-  const rotationAnimation = useSharedValue(0);
-
-  useEffect(() => {
-    rotationAnimation.value = withRepeat(
-      withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
-      4, // Run the animation 4 times
-    );
-  }, []);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${rotationAnimation.value}deg` }],
-  }));
-
-  return (
-    <Animated.View style={animatedStyle}>
-      <ThemedText style={styles.text}>👋</ThemedText>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 28,
-    lineHeight: 32,
-    marginTop: -6,
-  },
-});

components/ThemedView.tsx

@@ -1,14 +0,0 @@
-import { View, type ViewProps } from 'react-native';
-
-import { useThemeColor } from '@/hooks/useThemeColor';
-
-export type ThemedViewProps = ViewProps & {
-  lightColor?: string;
-  darkColor?: string;
-};
-
-export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
-  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
-
-  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
-}

components/__tests__/ThemedText-test.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import renderer from 'react-test-renderer';
-
-import { ThemedText } from '../ThemedText';
-
-it(`renders correctly`, () => {
-  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});

components/__tests__/__snapshots__/ThemedText-test.tsx.snap

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<Text
-  style={
-    [
-      {
-        "color": "#11181C",
-      },
-      {
-        "fontSize": 16,
-        "lineHeight": 24,
-      },
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-    ]
-  }
->
-  Snapshot test!
-</Text>
-`;

components/default/Collapsible.tsx

@@ -1,15 +1,13 @@
 import { PropsWithChildren, useState } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
-
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
+export const Collapsible = ({ children, title }: PropsWithChildren & { title: string }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const theme = useColorScheme() ?? 'light';
+  const scheme = useColorScheme() ?? 'dark';
 
   return (
     <ThemedView>
@@ -22,7 +20,7 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st
           name='chevron.right'
           size={18}
           weight='medium'
-          color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
+          color={scheme === 'light' ? Colors.light.icon : Colors.dark.icon}
           style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
         />
 
@@ -31,7 +29,7 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st
       {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
     </ThemedView>
   );
-}
+};
 
 const styles = StyleSheet.create({
   heading: {

components/default/ExternalLink.tsx

@@ -1,16 +1,16 @@
-import { Link } from 'expo-router';
+import { Link, RelativePathString } from 'expo-router';
 import { openBrowserAsync } from 'expo-web-browser';
 import { type ComponentProps } from 'react';
 import { Platform } from 'react-native';
 
 type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: string };
 
-export function ExternalLink({ href, ...rest }: Props) {
+export const ExternalLink = ({ href, ...rest }: Props) => {
   return (
     <Link
       target='_blank'
       {...rest}
-      href={href}
+      href={href as RelativePathString}
       onPress={async (event) => {
         if (Platform.OS !== 'web') {
           // Prevent the default behavior of linking to the default browser on native.
@@ -21,4 +21,4 @@ export function ExternalLink({ href, ...rest }: Props) {
       }}
     />
   );
-}
+};

components/default/HapticTab.tsx

@@ -2,7 +2,7 @@ import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
 import { PlatformPressable } from '@react-navigation/elements';
 import * as Haptics from 'expo-haptics';
 
-export function HapticTab(props: BottomTabBarButtonProps) {
+export const HapticTab = (props: BottomTabBarButtonProps) => {
   return (
     <PlatformPressable
       {...props}
@@ -15,4 +15,4 @@ export function HapticTab(props: BottomTabBarButtonProps) {
       }}
     />
   );
-}
+};

components/default/ParallaxScrollView.tsx

@@ -6,8 +6,7 @@ import Animated, {
   useAnimatedStyle,
   useScrollViewOffset,
 } from 'react-native-reanimated';
-
+import { ThemedView } from '@/components/theme/Theme';
-import { ThemedView } from '@/components/ThemedView';
 import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
@@ -16,14 +15,16 @@ const HEADER_HEIGHT = 250;
 type Props = PropsWithChildren<{
   headerImage: ReactElement;
   headerBackgroundColor: { dark: string; light: string };
+  headerHeight?: number;
 }>;
 
-export default function ParallaxScrollView({
+const ParallaxScrollView = ({
   children,
   headerImage,
   headerBackgroundColor,
-}: Props) {
+  headerHeight = HEADER_HEIGHT,
-  const colorScheme = useColorScheme() ?? 'light';
+}: Props) => {
+  const scheme = useColorScheme() ?? 'dark';
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
   const scrollOffset = useScrollViewOffset(scrollRef);
   const bottom = useBottomTabOverflow();
@@ -33,12 +34,12 @@ export default function ParallaxScrollView({
         {
           translateY: interpolate(
             scrollOffset.value,
-            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+            [-headerHeight, 0, headerHeight],
-            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
+            [-headerHeight / 2, 0, headerHeight * 0.75],
           ),
         },
         {
-          scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+          scale: interpolate(scrollOffset.value, [-headerHeight, 0, headerHeight], [2, 1, 1]),
         },
       ],
     };
@@ -55,7 +56,10 @@ export default function ParallaxScrollView({
         <Animated.View
           style={[
             styles.header,
-            { backgroundColor: headerBackgroundColor[colorScheme] },
+            {
+              backgroundColor: headerBackgroundColor[scheme],
+              height: headerHeight,
+            },
             headerAnimatedStyle,
           ]}
         >
@@ -65,14 +69,14 @@ export default function ParallaxScrollView({
       </Animated.ScrollView>
     </ThemedView>
   );
-}
+};
+export default ParallaxScrollView;
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   header: {
-    height: HEADER_HEIGHT,
     overflow: 'hidden',
   },
   content: {

components/theme/Theme.tsx

@@ -1,22 +1,30 @@
+import { View, type ViewProps } from 'react-native';
 import { Text, type TextProps, StyleSheet } from 'react-native';
-
 import { useThemeColor } from '@/hooks/useThemeColor';
 
+export type ThemedViewProps = ViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+};
 export type ThemedTextProps = TextProps & {
   lightColor?: string;
   darkColor?: string;
   type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
 };
 
-export function ThemedText({
+export const ThemedView = ({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) => {
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
+};
+
+export const ThemedText = ({
   style,
   lightColor,
   darkColor,
   type = 'default',
   ...rest
-}: ThemedTextProps) {
+}: ThemedTextProps) => {
   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
-
   return (
     <Text
       style={[
@@ -31,7 +39,7 @@ export function ThemedText({
       {...rest}
     />
   );
-}
+};
 
 const styles = StyleSheet.create({
   default: {

components/theme/buttons/Button.tsx

@@ -0,0 +1,58 @@
+import { StyleSheet, Pressable } from 'react-native';
+import { ThemedView } from '@/components/theme/Theme';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { StyleProp, ViewStyle } from 'react-native';
+
+const DEFAULT_WIDTH = 320;
+const DEFAULT_HEIGHT = 68;
+
+type Props = {
+  width?: number;
+  height?: number;
+  onPress?: () => void;
+};
+
+const Button = ({
+  width,
+  height,
+  children,
+  onPress,
+}: Props & React.ComponentProps<typeof Pressable>) => {
+  const scheme = useColorScheme() ?? 'dark';
+  return (
+    <ThemedView
+      style={[
+        styles.buttonContainer,
+        {
+          width: width ?? DEFAULT_WIDTH,
+          height: height ?? DEFAULT_HEIGHT,
+        },
+      ]}
+    >
+      <Pressable
+        style={[styles.button, { backgroundColor: Colors[scheme].text }]}
+        onPress={onPress}
+      >
+        {children}
+      </Pressable>
+    </ThemedView>
+  );
+};
+export default Button;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 3,
+  },
+  button: {
+    borderRadius: 10,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+});

components/theme/buttons/TextButton.tsx

@@ -0,0 +1,33 @@
+import Button from '@/components/theme/buttons/Button';
+import { ThemedText } from '@/components/theme/Theme';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+const DEFAULT_FONT_SIZE = 16;
+
+type Props = {
+  width?: number;
+  height?: number;
+  text: string;
+  fontSize?: number;
+  onPress?: () => void;
+};
+
+const TextButton = ({ width, height, text, fontSize, onPress }: Props) => {
+  const scheme = useColorScheme() ?? 'dark';
+  return (
+    <Button width={width} height={height} onPress={onPress}>
+      <ThemedText
+        style={[
+          {
+            color: Colors[scheme].background,
+            fontSize: fontSize ?? DEFAULT_FONT_SIZE,
+          },
+        ]}
+      >
+        {text}
+      </ThemedText>
+    </Button>
+  );
+};
+export default TextButton;

components/ui/IconSymbol.ios.tsx

@@ -1,7 +1,7 @@
 import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
 import { StyleProp, ViewStyle } from 'react-native';
 
-export function IconSymbol({
+export const IconSymbol = ({
   name,
   size = 24,
   color,
@@ -13,7 +13,7 @@ export function IconSymbol({
   color: string;
   style?: StyleProp<ViewStyle>;
   weight?: SymbolWeight;
-}) {
+}) => {
   return (
     <SymbolView
       weight={weight}
@@ -29,4 +29,4 @@ export function IconSymbol({
       ]}
     />
   );
-}
+};

components/ui/IconSymbol.tsx

@@ -3,7 +3,7 @@
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import { SymbolWeight } from 'expo-symbols';
 import React from 'react';
-import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native';
+import { OpaqueColorValue, StyleProp, TextStyle } from 'react-native';
 
 // Add your SFSymbol to MaterialIcons mappings here.
 const MAPPING = {
@@ -27,7 +27,7 @@ export type IconSymbolName = keyof typeof MAPPING;
  *
  * Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons.
  */
-export function IconSymbol({
+export const IconSymbol = ({
   name,
   size = 24,
   color,
@@ -36,8 +36,8 @@ export function IconSymbol({
   name: IconSymbolName;
   size?: number;
   color: string | OpaqueColorValue;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
   weight?: SymbolWeight;
-}) {
+}) => {
   return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
-}
+};

components/ui/TabBarBackground.ios.tsx

@@ -3,7 +3,7 @@ import { BlurView } from 'expo-blur';
 import { StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-export default function BlurTabBarBackground() {
+const BlurTabBarBackground = () => {
   return (
     <BlurView
       // System chrome material automatically adapts to the system's theme
@@ -13,10 +13,11 @@ export default function BlurTabBarBackground() {
       style={StyleSheet.absoluteFill}
     />
   );
-}
+};
+export default BlurTabBarBackground;
 
-export function useBottomTabOverflow() {
+export const useBottomTabOverflow = () => {
   const tabHeight = useBottomTabBarHeight();
   const { bottom } = useSafeAreaInsets();
   return tabHeight - bottom;
-}
+};

components/ui/TabBarBackground.tsx

@@ -1,6 +1,5 @@
 // This is a shim for web and Android where the tab bar is generally opaque.
 export default undefined;
-
+export const useBottomTabOverflow = () => {
-export function useBottomTabOverflow() {
   return 0;
-}
+};