We are on Build a screen

components/HelloWave.tsx

@@ -1,37 +0,0 @@
-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);
-
-  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/__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/buttons/Button.tsx

@@ -0,0 +1,85 @@
+import { StyleSheet, Pressable } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+
+type Props = {
+  label: string;
+  theme?: 'primary';
+  onPress?: () => void;
+};
+
+const Button = ({ label, theme, onPress }: Props) => {
+  const scheme = useColorScheme() ?? 'light';
+  if (theme === 'primary') {
+    return (
+      <ThemedView style={styles.buttonContainer}>
+        <Pressable
+          style={[
+            styles.button,
+            {backgroundColor: Colors[scheme].text}
+          ]}
+          onPress={() => alert('You pressed a button.')}
+        >
+          <ThemedText
+            style={[
+              styles.buttonLabel,
+              {color: Colors[scheme].background}
+            ]}
+          >
+            {label}
+          </ThemedText>
+        </Pressable>
+      </ThemedView>
+    );
+  } else {
+    return (
+      <ThemedView style={styles.buttonContainer}>
+        <Pressable
+          style={[
+            styles.button,
+            {backgroundColor: Colors[scheme].text}
+          ]}
+          onPress={() => alert('You pressed a button.')}
+        >
+          <ThemedText
+            style={[
+              styles.buttonLabel,
+              {color: Colors[scheme].background}
+            ]}
+          >
+            {label}
+          </ThemedText>
+        </Pressable>
+      </ThemedView>
+    );
+  }
+};
+export default Button;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    width: 320,
+    height: 68,
+    marginHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 3,
+  },
+  button: {
+    borderRadius: 10,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  buttonIcon: {
+    paddingRight: 8,
+  },
+  buttonLabel: {
+    fontSize: 16,
+  },
+});