diff --git a/README.md b/README.md
index 48dd63f..42d2b49 100644
--- a/README.md
+++ b/README.md
@@ -1,50 +1,3 @@
-# Welcome to your Expo app 👋
+# Birthday app
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
-
-## Get started
-
-1. Install dependencies
-
- ```bash
- npm install
- ```
-
-2. Start the app
-
- ```bash
- npx expo start
- ```
-
-In the output, you'll find options to open the app in a
-
-- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
-- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
-- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
-- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
-
-You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
-
-## Get a fresh project
-
-When you're ready, run:
-
-```bash
-npm run reset-project
-```
-
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
-
-## Learn more
-
-To learn more about developing your project with Expo, look at the following resources:
-
-- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
-
-## Join the community
-
-Join our community of developers creating universal apps.
-
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+A mobile app that can save and alert of the birthdays of people
\ No newline at end of file
diff --git a/.gitignore b/apk/.gitignore
similarity index 100%
rename from .gitignore
rename to apk/.gitignore
diff --git a/.vscode/extensions.json b/apk/.vscode/extensions.json
similarity index 100%
rename from .vscode/extensions.json
rename to apk/.vscode/extensions.json
diff --git a/.vscode/settings.json b/apk/.vscode/settings.json
similarity index 100%
rename from .vscode/settings.json
rename to apk/.vscode/settings.json
diff --git a/apk/README.md b/apk/README.md
new file mode 100644
index 0000000..48dd63f
--- /dev/null
+++ b/apk/README.md
@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+ ```bash
+ npm install
+ ```
+
+2. Start the app
+
+ ```bash
+ npx expo start
+ ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
diff --git a/app.json b/apk/app.json
similarity index 100%
rename from app.json
rename to apk/app.json
diff --git a/apk/app/_layout.tsx b/apk/app/_layout.tsx
new file mode 100644
index 0000000..676e7e5
--- /dev/null
+++ b/apk/app/_layout.tsx
@@ -0,0 +1,28 @@
+import {
+ DarkTheme,
+ DefaultTheme,
+ ThemeProvider,
+} from "@react-navigation/native";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import "react-native-reanimated";
+
+import { useColorScheme } from "@/hooks/use-color-scheme";
+
+export const unstable_settings = {
+ anchor: "(tabs)",
+};
+
+export default function RootLayout() {
+ const colorScheme = useColorScheme();
+
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/apk/app/add.tsx b/apk/app/add.tsx
new file mode 100644
index 0000000..fc1077e
--- /dev/null
+++ b/apk/app/add.tsx
@@ -0,0 +1,80 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import { useRouter } from "expo-router";
+import React, { useState } from "react";
+import {
+ Button,
+ Platform,
+ StyleSheet,
+ Text,
+ TextInput,
+ View,
+} from "react-native";
+
+export default function SimpleForm() {
+ const router = useRouter();
+ const [name, setName] = useState("");
+ const [date, setDate] = useState(new Date());
+ const [showPicker, setShowPicker] = useState(false);
+
+ const onChangeDate = (event, selectedDate) => {
+ setShowPicker(Platform.OS === "ios");
+ if (selectedDate) {
+ setDate(selectedDate);
+ }
+ };
+
+ const handleSubmit = () => {
+ alert(`Name: ${name}\nDate: ${date.toDateString()}`);
+ router.push("/");
+ };
+
+ return (
+
+ Name:
+
+
+ Date:
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ padding: 20,
+ marginTop: 50,
+ },
+ label: {
+ fontSize: 16,
+ marginBottom: 5,
+ },
+ input: {
+ borderWidth: 1,
+ borderColor: "#ccc",
+ padding: 10,
+ marginBottom: 15,
+ borderRadius: 5,
+ },
+ dateText: {
+ marginVertical: 10,
+ fontSize: 16,
+ },
+});
diff --git a/apk/app/index.tsx b/apk/app/index.tsx
new file mode 100644
index 0000000..16a2a17
--- /dev/null
+++ b/apk/app/index.tsx
@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+
+import { BirthdayList } from "@/components/birthdate-list";
+import ScrollView from "@/components/scroll-view";
+import { View } from "react-native";
+
+export default function HomeScreen() {
+ return (
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ titleContainer: {
+ gap: 8,
+ margin: 20,
+ },
+});
diff --git a/assets/images/android-icon-background.png b/apk/assets/images/android-icon-background.png
similarity index 100%
rename from assets/images/android-icon-background.png
rename to apk/assets/images/android-icon-background.png
diff --git a/assets/images/android-icon-foreground.png b/apk/assets/images/android-icon-foreground.png
similarity index 100%
rename from assets/images/android-icon-foreground.png
rename to apk/assets/images/android-icon-foreground.png
diff --git a/assets/images/android-icon-monochrome.png b/apk/assets/images/android-icon-monochrome.png
similarity index 100%
rename from assets/images/android-icon-monochrome.png
rename to apk/assets/images/android-icon-monochrome.png
diff --git a/assets/images/favicon.png b/apk/assets/images/favicon.png
similarity index 100%
rename from assets/images/favicon.png
rename to apk/assets/images/favicon.png
diff --git a/assets/images/icon.png b/apk/assets/images/icon.png
similarity index 100%
rename from assets/images/icon.png
rename to apk/assets/images/icon.png
diff --git a/assets/images/partial-react-logo.png b/apk/assets/images/partial-react-logo.png
similarity index 100%
rename from assets/images/partial-react-logo.png
rename to apk/assets/images/partial-react-logo.png
diff --git a/assets/images/react-logo.png b/apk/assets/images/react-logo.png
similarity index 100%
rename from assets/images/react-logo.png
rename to apk/assets/images/react-logo.png
diff --git a/assets/images/react-logo@2x.png b/apk/assets/images/react-logo@2x.png
similarity index 100%
rename from assets/images/react-logo@2x.png
rename to apk/assets/images/react-logo@2x.png
diff --git a/assets/images/react-logo@3x.png b/apk/assets/images/react-logo@3x.png
similarity index 100%
rename from assets/images/react-logo@3x.png
rename to apk/assets/images/react-logo@3x.png
diff --git a/assets/images/splash-icon.png b/apk/assets/images/splash-icon.png
similarity index 100%
rename from assets/images/splash-icon.png
rename to apk/assets/images/splash-icon.png
diff --git a/apk/components/birthdate-item.tsx b/apk/components/birthdate-item.tsx
new file mode 100644
index 0000000..5512e3d
--- /dev/null
+++ b/apk/components/birthdate-item.tsx
@@ -0,0 +1,38 @@
+// BirthdayItem.tsx
+import { StyleSheet, Text, View } from "react-native";
+
+interface BirthdayItemProps {
+ name: string;
+ date: string;
+ age?: number;
+}
+
+export function BirthdayItem({ name, date, age }: BirthdayItemProps) {
+ return (
+
+ {name}
+ {age && Age: {age}}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ itemContainer: {
+ padding: 15,
+ borderRadius: 8,
+ backgroundColor: "#f0f0f0",
+ boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+ marginBottom: 10,
+ },
+ name: {
+ fontSize: 16,
+ fontWeight: "bold",
+ },
+ date: {
+ fontSize: 14,
+ },
+ age: {
+ fontSize: 12,
+ marginTop: 5,
+ },
+});
diff --git a/apk/components/birthdate-list.tsx b/apk/components/birthdate-list.tsx
new file mode 100644
index 0000000..b5b80eb
--- /dev/null
+++ b/apk/components/birthdate-list.tsx
@@ -0,0 +1,127 @@
+// birthdate-list.tsx
+import { useRouter } from "expo-router";
+import {
+ SectionList,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from "react-native";
+import { BirthdayItem } from "./birthdate-item";
+
+const DATA = [
+ { id: "1", name: "John Doe", date: "2024-01-15" },
+ { id: "2", name: "Jane Smith", date: "2024-01-15" },
+ { id: "3", name: "Bob Johnson", date: "2024-02-10" },
+ { id: "4", name: "Alice Brown", date: "2024-02-10" },
+ { id: "5", name: "Charlie Wilson", date: "2024-01-20" },
+ { id: "6", name: "Bob Johnson", date: "2024-02-10" },
+ { id: "7", name: "Alice Brown", date: "2024-02-10" },
+ { id: "8", name: "Charlie Wilson", date: "2024-01-20" },
+ { id: "9", name: "Bob Johnson", date: "2024-02-10" },
+ { id: "10", name: "Alice Brown", date: "2024-02-10" },
+ { id: "11", name: "Charlie Wilson", date: "2024-01-20" },
+ { id: "12", name: "Charlie Wilson", date: "2024-01-20" },
+ { id: "13", name: "Charlie Wilson", date: "2024-01-20" },
+ { id: "14", name: "Charlie Wilson", date: "2024-01-20" },
+];
+
+interface BirthdayItemData {
+ id: string;
+ name: string;
+ date: string;
+}
+
+interface SectionData {
+ title: string;
+ data: BirthdayItemData[];
+}
+
+export function BirthdayList() {
+ const router = useRouter();
+ const groupedData = groupBirthdaysByDate(DATA);
+
+ return (
+
+
+
+ Upcoming Birthdays
+
+ router.push("/add")}
+ style={styles.addButton}
+ >
+ +
+
+
+
+ item.id}
+ renderItem={({ item }) => (
+
+ )}
+ showsVerticalScrollIndicator={false}
+ renderSectionHeader={({ section: { title } }) => (
+
+ {title}
+
+ )}
+ />
+
+ );
+}
+
+// Helper function to group and sort
+function groupBirthdaysByDate(data: BirthdayItemData[]): SectionData[] {
+ // Sort by date
+ const sorted = [...data].sort((a, b) => {
+ return new Date(a.date).getTime() - new Date(b.date).getTime();
+ });
+
+ // Group by date
+ const grouped = sorted.reduce((acc, item) => {
+ const existing = acc.find((section) => section.title === item.date);
+
+ if (existing) {
+ existing.data.push(item);
+ } else {
+ acc.push({ title: item.date, data: [item] });
+ }
+
+ return acc;
+ }, [] as SectionData[]);
+
+ return grouped;
+}
+
+const styles = StyleSheet.create({
+ titleContainer: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
+ paddingHorizontal: 5,
+ paddingVertical: 10,
+ },
+ addButton: {
+ width: 40,
+ height: 40,
+ borderRadius: 20,
+ backgroundColor: "#007AFF",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ addButtonText: {
+ fontSize: 24,
+ color: "white",
+ fontWeight: "bold",
+ },
+ headerContainer: {
+ paddingVertical: 10,
+ paddingHorizontal: 5,
+ },
+ sectionHeader: {
+ fontSize: 18,
+ fontWeight: "bold",
+ },
+});
diff --git a/apk/components/scroll-view.tsx b/apk/components/scroll-view.tsx
new file mode 100644
index 0000000..e7ec710
--- /dev/null
+++ b/apk/components/scroll-view.tsx
@@ -0,0 +1,44 @@
+import { StyleSheet } from "react-native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
+
+import { useColorScheme } from "@/hooks/use-color-scheme";
+import { useThemeColor } from "@/hooks/use-theme-color";
+import { PropsWithChildren } from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+type Props = PropsWithChildren<{
+ headerBackgroundColor: { dark: string; light: string };
+}>;
+
+export default function ScrollView({ children, headerBackgroundColor }: Props) {
+ const scrollRef = useAnimatedRef();
+ const insets = useSafeAreaInsets();
+ const colorScheme = useColorScheme() ?? "light";
+ const backgroundColor = useThemeColor({}, "background");
+
+ return (
+
+ {children}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: "#ccc",
+ },
+
+ content: {},
+});
diff --git a/constants/theme.ts b/apk/constants/theme.ts
similarity index 100%
rename from constants/theme.ts
rename to apk/constants/theme.ts
diff --git a/eslint.config.js b/apk/eslint.config.js
similarity index 100%
rename from eslint.config.js
rename to apk/eslint.config.js
diff --git a/hooks/use-color-scheme.ts b/apk/hooks/use-color-scheme.ts
similarity index 100%
rename from hooks/use-color-scheme.ts
rename to apk/hooks/use-color-scheme.ts
diff --git a/hooks/use-color-scheme.web.ts b/apk/hooks/use-color-scheme.web.ts
similarity index 100%
rename from hooks/use-color-scheme.web.ts
rename to apk/hooks/use-color-scheme.web.ts
diff --git a/hooks/use-theme-color.ts b/apk/hooks/use-theme-color.ts
similarity index 100%
rename from hooks/use-theme-color.ts
rename to apk/hooks/use-theme-color.ts
diff --git a/package-lock.json b/apk/package-lock.json
similarity index 99%
rename from package-lock.json
rename to apk/package-lock.json
index ad0c8fe..ca6b609 100644
--- a/package-lock.json
+++ b/apk/package-lock.json
@@ -9,6 +9,7 @@
"version": "1.0.0",
"dependencies": {
"@expo/vector-icons": "^15.0.3",
+ "@react-native-community/datetimepicker": "^9.1.0",
"@react-navigation/bottom-tabs": "^7.4.0",
"@react-navigation/elements": "^2.6.3",
"@react-navigation/native": "^7.1.8",
@@ -2797,6 +2798,29 @@
}
}
},
+ "node_modules/@react-native-community/datetimepicker": {
+ "version": "9.1.0",
+ "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-9.1.0.tgz",
+ "integrity": "sha512-eadbnk+I2vxvW30iTAsm/qlCnMMAadkifIMYNEB2lzhxN/SvlKc7S2V4k5DyrwjdCbqdcMk3t9K6fnUMcAV34w==",
+ "license": "MIT",
+ "dependencies": {
+ "invariant": "^2.2.4"
+ },
+ "peerDependencies": {
+ "expo": ">=52.0.0",
+ "react": "*",
+ "react-native": "*",
+ "react-native-windows": "*"
+ },
+ "peerDependenciesMeta": {
+ "expo": {
+ "optional": true
+ },
+ "react-native-windows": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@react-native/assets-registry": {
"version": "0.81.5",
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz",
diff --git a/package.json b/apk/package.json
similarity index 86%
rename from package.json
rename to apk/package.json
index 2b751c8..432b21f 100644
--- a/package.json
+++ b/apk/package.json
@@ -12,6 +12,7 @@
},
"dependencies": {
"@expo/vector-icons": "^15.0.3",
+ "@react-native-community/datetimepicker": "^9.1.0",
"@react-navigation/bottom-tabs": "^7.4.0",
"@react-navigation/elements": "^2.6.3",
"@react-navigation/native": "^7.1.8",
@@ -31,17 +32,17 @@
"react-dom": "19.1.0",
"react-native": "0.81.5",
"react-native-gesture-handler": "~2.28.0",
- "react-native-worklets": "0.5.1",
"react-native-reanimated": "~4.1.1",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "~4.16.0",
- "react-native-web": "~0.21.0"
+ "react-native-web": "~0.21.0",
+ "react-native-worklets": "0.5.1"
},
"devDependencies": {
"@types/react": "~19.1.0",
- "typescript": "~5.9.2",
"eslint": "^9.25.0",
- "eslint-config-expo": "~10.0.0"
+ "eslint-config-expo": "~10.0.0",
+ "typescript": "~5.9.2"
},
"private": true
}
diff --git a/scripts/reset-project.js b/apk/scripts/reset-project.js
similarity index 100%
rename from scripts/reset-project.js
rename to apk/scripts/reset-project.js
diff --git a/tsconfig.json b/apk/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to apk/tsconfig.json
diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
deleted file mode 100644
index 54e11d0..0000000
--- a/app/(tabs)/_layout.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
-
-import { HapticTab } from '@/components/haptic-tab';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
-
-export default function TabLayout() {
- const colorScheme = useColorScheme();
-
- return (
-
- ,
- }}
- />
- ,
- }}
- />
-
- );
-}
diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx
deleted file mode 100644
index 71518f9..0000000
--- a/app/(tabs)/explore.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { Collapsible } from '@/components/ui/collapsible';
-import { ExternalLink } from '@/components/external-link';
-import ParallaxScrollView from '@/components/parallax-scroll-view';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Fonts } from '@/constants/theme';
-
-export default function TabTwoScreen() {
- return (
-
- }>
-
-
- Explore
-
-
- This app includes example code to help you get started.
-
-
- This app has two screens:{' '}
- app/(tabs)/index.tsx and{' '}
- app/(tabs)/explore.tsx
-
-
- The layout file in app/(tabs)/_layout.tsx{' '}
- sets up the tab navigator.
-
-
- Learn more
-
-
-
-
- You can open this project on Android, iOS, and the web. To open the web version, press{' '}
- w in the terminal running this project.
-
-
-
-
- For static images, you can use the @2x and{' '}
- @3x suffixes to provide files for
- different screen densities
-
-
-
- Learn more
-
-
-
-
- This template has light and dark mode support. The{' '}
- useColorScheme() hook lets you inspect
- what the user's current color scheme is, and so you can adjust UI colors accordingly.
-
-
- Learn more
-
-
-
-
- This template includes an example of an animated component. The{' '}
- components/HelloWave.tsx component uses
- the powerful{' '}
-
- react-native-reanimated
- {' '}
- library to create a waving hand animation.
-
- {Platform.select({
- ios: (
-
- The components/ParallaxScrollView.tsx{' '}
- component provides a parallax effect for the header image.
-
- ),
- })}
-
-
- );
-}
-
-const styles = StyleSheet.create({
- headerImage: {
- color: '#808080',
- bottom: -90,
- left: -35,
- position: 'absolute',
- },
- titleContainer: {
- flexDirection: 'row',
- gap: 8,
- },
-});
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
deleted file mode 100644
index 786b736..0000000
--- a/app/(tabs)/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { HelloWave } from '@/components/hello-wave';
-import ParallaxScrollView from '@/components/parallax-scroll-view';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { Link } from 'expo-router';
-
-export default function HomeScreen() {
- return (
-
- }>
-
- Welcome!
-
-
-
- Step 1: Try it
-
- Edit app/(tabs)/index.tsx to see changes.
- Press{' '}
-
- {Platform.select({
- ios: 'cmd + d',
- android: 'cmd + m',
- web: 'F12',
- })}
- {' '}
- to open developer tools.
-
-
-
-
-
- Step 2: Explore
-
-
-
- alert('Action pressed')} />
- alert('Share pressed')}
- />
-
- alert('Delete pressed')}
- />
-
-
-
-
-
- {`Tap the Explore tab to learn more about what's included in this starter app.`}
-
-
-
- Step 3: Get a fresh start
-
- {`When you're ready, run `}
- npm run reset-project to get a fresh{' '}
- app directory. This will move the current{' '}
- app to{' '}
- app-example.
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- titleContainer: {
- flexDirection: 'row',
- alignItems: 'center',
- gap: 8,
- },
- stepContainer: {
- gap: 8,
- marginBottom: 8,
- },
- reactLogo: {
- height: 178,
- width: 290,
- bottom: 0,
- left: 0,
- position: 'absolute',
- },
-});
diff --git a/app/_layout.tsx b/app/_layout.tsx
deleted file mode 100644
index f518c9b..0000000
--- a/app/_layout.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { Stack } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
-import 'react-native-reanimated';
-
-import { useColorScheme } from '@/hooks/use-color-scheme';
-
-export const unstable_settings = {
- anchor: '(tabs)',
-};
-
-export default function RootLayout() {
- const colorScheme = useColorScheme();
-
- return (
-
-
-
-
-
-
-
- );
-}
diff --git a/app/modal.tsx b/app/modal.tsx
deleted file mode 100644
index 6dfbc1a..0000000
--- a/app/modal.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Link } from 'expo-router';
-import { StyleSheet } from 'react-native';
-
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-
-export default function ModalScreen() {
- return (
-
- This is a modal
-
- Go to home screen
-
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- padding: 20,
- },
- link: {
- marginTop: 15,
- paddingVertical: 15,
- },
-});
diff --git a/components/external-link.tsx b/components/external-link.tsx
deleted file mode 100644
index 883e515..0000000
--- a/components/external-link.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Href, Link } from 'expo-router';
-import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
-import { type ComponentProps } from 'react';
-
-type Props = Omit, 'href'> & { href: Href & string };
-
-export function ExternalLink({ href, ...rest }: Props) {
- return (
- {
- if (process.env.EXPO_OS !== 'web') {
- // Prevent the default behavior of linking to the default browser on native.
- event.preventDefault();
- // Open the link in an in-app browser.
- await openBrowserAsync(href, {
- presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
- });
- }
- }}
- />
- );
-}
diff --git a/components/haptic-tab.tsx b/components/haptic-tab.tsx
deleted file mode 100644
index 7f3981c..0000000
--- a/components/haptic-tab.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
-import { PlatformPressable } from '@react-navigation/elements';
-import * as Haptics from 'expo-haptics';
-
-export function HapticTab(props: BottomTabBarButtonProps) {
- return (
- {
- if (process.env.EXPO_OS === 'ios') {
- // Add a soft haptic feedback when pressing down on the tabs.
- Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
- }
- props.onPressIn?.(ev);
- }}
- />
- );
-}
diff --git a/components/hello-wave.tsx b/components/hello-wave.tsx
deleted file mode 100644
index 5def547..0000000
--- a/components/hello-wave.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Animated from 'react-native-reanimated';
-
-export function HelloWave() {
- return (
-
- 👋
-
- );
-}
diff --git a/components/parallax-scroll-view.tsx b/components/parallax-scroll-view.tsx
deleted file mode 100644
index 6f674a7..0000000
--- a/components/parallax-scroll-view.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { PropsWithChildren, ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, {
- interpolate,
- useAnimatedRef,
- useAnimatedStyle,
- useScrollOffset,
-} from 'react-native-reanimated';
-
-import { ThemedView } from '@/components/themed-view';
-import { useColorScheme } from '@/hooks/use-color-scheme';
-import { useThemeColor } from '@/hooks/use-theme-color';
-
-const HEADER_HEIGHT = 250;
-
-type Props = PropsWithChildren<{
- headerImage: ReactElement;
- headerBackgroundColor: { dark: string; light: string };
-}>;
-
-export default function ParallaxScrollView({
- children,
- headerImage,
- headerBackgroundColor,
-}: Props) {
- const backgroundColor = useThemeColor({}, 'background');
- const colorScheme = useColorScheme() ?? 'light';
- const scrollRef = useAnimatedRef();
- const scrollOffset = useScrollOffset(scrollRef);
- const headerAnimatedStyle = useAnimatedStyle(() => {
- return {
- transform: [
- {
- translateY: interpolate(
- scrollOffset.value,
- [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
- [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
- ),
- },
- {
- scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
- },
- ],
- };
- });
-
- return (
-
-
- {headerImage}
-
- {children}
-
- );
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- },
- header: {
- height: HEADER_HEIGHT,
- overflow: 'hidden',
- },
- content: {
- flex: 1,
- padding: 32,
- gap: 16,
- overflow: 'hidden',
- },
-});
diff --git a/components/themed-text.tsx b/components/themed-text.tsx
deleted file mode 100644
index d79d0a1..0000000
--- a/components/themed-text.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { StyleSheet, Text, type TextProps } from 'react-native';
-
-import { useThemeColor } from '@/hooks/use-theme-color';
-
-export type ThemedTextProps = TextProps & {
- lightColor?: string;
- darkColor?: string;
- type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
-};
-
-export function ThemedText({
- style,
- lightColor,
- darkColor,
- type = 'default',
- ...rest
-}: ThemedTextProps) {
- const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
-
- return (
-
- );
-}
-
-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',
- },
-});
diff --git a/components/themed-view.tsx b/components/themed-view.tsx
deleted file mode 100644
index 6f181d8..0000000
--- a/components/themed-view.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { View, type ViewProps } from 'react-native';
-
-import { useThemeColor } from '@/hooks/use-theme-color';
-
-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 ;
-}
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
deleted file mode 100644
index 6345fde..0000000
--- a/components/ui/collapsible.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { PropsWithChildren, useState } from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
-
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
-
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
- const [isOpen, setIsOpen] = useState(false);
- const theme = useColorScheme() ?? 'light';
-
- return (
-
- setIsOpen((value) => !value)}
- activeOpacity={0.8}>
-
-
- {title}
-
- {isOpen && {children}}
-
- );
-}
-
-const styles = StyleSheet.create({
- heading: {
- flexDirection: 'row',
- alignItems: 'center',
- gap: 6,
- },
- content: {
- marginTop: 6,
- marginLeft: 24,
- },
-});
diff --git a/components/ui/icon-symbol.ios.tsx b/components/ui/icon-symbol.ios.tsx
deleted file mode 100644
index 9177f4d..0000000
--- a/components/ui/icon-symbol.ios.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
-import { StyleProp, ViewStyle } from 'react-native';
-
-export function IconSymbol({
- name,
- size = 24,
- color,
- style,
- weight = 'regular',
-}: {
- name: SymbolViewProps['name'];
- size?: number;
- color: string;
- style?: StyleProp;
- weight?: SymbolWeight;
-}) {
- return (
-
- );
-}
diff --git a/components/ui/icon-symbol.tsx b/components/ui/icon-symbol.tsx
deleted file mode 100644
index b7ece6b..0000000
--- a/components/ui/icon-symbol.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Fallback for using MaterialIcons on Android and web.
-
-import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
-import { ComponentProps } from 'react';
-import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
-
-type IconMapping = Record['name']>;
-type IconSymbolName = keyof typeof MAPPING;
-
-/**
- * Add your SF Symbols to Material Icons mappings here.
- * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
- * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
- */
-const MAPPING = {
- 'house.fill': 'home',
- 'paperplane.fill': 'send',
- 'chevron.left.forwardslash.chevron.right': 'code',
- 'chevron.right': 'chevron-right',
-} as IconMapping;
-
-/**
- * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
- * This ensures a consistent look across platforms, and optimal resource usage.
- * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
- */
-export function IconSymbol({
- name,
- size = 24,
- color,
- style,
-}: {
- name: IconSymbolName;
- size?: number;
- color: string | OpaqueColorValue;
- style?: StyleProp;
- weight?: SymbolWeight;
-}) {
- return ;
-}