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

components/theme/Theme.tsx

@@ -0,0 +1,68 @@
+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 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) => {
+  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+  return (
+    <Text
+      style={[
+        { color },
+        type === 'default' ? styles.default : undefined,
+        type === 'title' ? styles.title : undefined,
+        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+        type === 'subtitle' ? styles.subtitle : undefined,
+        type === 'link' ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  link: {
+    lineHeight: 30,
+    fontSize: 16,
+    color: '#0a7ea4',
+  },
+});

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;