commit 97996c9846c7fd34b7fb0235fb5c2c98930bb19f Author: Nils Briggen Date: Sat Jun 13 17:05:52 2026 +0200 Initial commit Generated by create-expo-app 4.0.0. diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000..176e6a5 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,5 @@ +{ + "enabledPlugins": { + "expo@claude-plugins-official": true + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4b00baf --- /dev/null +++ b/.gitignore @@ -0,0 +1,43 @@ +# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files + +# dependencies +node_modules/ + +# Expo +.expo/ +dist/ +web-build/ +expo-env.d.ts + +# Native +.kotlin/ +*.orig.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision + +# Metro +.metro-health-check* + +# debug +npm-debug.* +yarn-debug.* +yarn-error.* + +# macOS +.DS_Store +*.pem + +# local env files +.env*.local + +# typescript +*.tsbuildinfo + +example + +# generated native folders +/ios +/android diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..b7ed837 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1 @@ +{ "recommendations": ["expo.vscode-expo-tools"] } diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..e2798e4 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll": "explicit", + "source.organizeImports": "explicit", + "source.sortMembers": "explicit" + } +} diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..a26b4bb --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,3 @@ +# Expo HAS CHANGED + +Read the exact versioned docs at https://docs.expo.dev/versions/v56.0.0/ before writing any code. diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..43c994c --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..30b20e3 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015-present 650 Industries, Inc. (aka Expo) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..4d67aec --- /dev/null +++ b/README.md @@ -0,0 +1,56 @@ +# 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. + +### Other setup steps + +- To set up ESLint for linting, run `npx expo lint`, or follow our guide on ["Using ESLint and Prettier"](https://docs.expo.dev/guides/using-eslint/) +- If you'd like to set up unit testing, follow our guide on ["Unit Testing with Jest"](https://docs.expo.dev/develop/unit-testing/) +- Learn more about the TypeScript setup in this template in our guide on ["Using TypeScript"](https://docs.expo.dev/guides/typescript/) + +## 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/app.json new file mode 100644 index 0000000..9316662 --- /dev/null +++ b/app.json @@ -0,0 +1,44 @@ +{ + "expo": { + "name": "wisp", + "slug": "wisp", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/images/icon.png", + "scheme": "wisp", + "userInterfaceStyle": "automatic", + "ios": { + "icon": "./assets/expo.icon" + }, + "android": { + "adaptiveIcon": { + "backgroundColor": "#E6F4FE", + "foregroundImage": "./assets/images/android-icon-foreground.png", + "backgroundImage": "./assets/images/android-icon-background.png", + "monochromeImage": "./assets/images/android-icon-monochrome.png" + }, + "predictiveBackGestureEnabled": false + }, + "web": { + "output": "static", + "favicon": "./assets/images/favicon.png" + }, + "plugins": [ + "expo-router", + [ + "expo-splash-screen", + { + "backgroundColor": "#208AEF", + "android": { + "image": "./assets/images/splash-icon.png", + "imageWidth": 76 + } + } + ] + ], + "experiments": { + "typedRoutes": true, + "reactCompiler": true + } + } +} diff --git a/assets/expo.icon/Assets/expo-symbol 2.svg b/assets/expo.icon/Assets/expo-symbol 2.svg new file mode 100644 index 0000000..51d3676 --- /dev/null +++ b/assets/expo.icon/Assets/expo-symbol 2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/expo.icon/Assets/grid.png b/assets/expo.icon/Assets/grid.png new file mode 100644 index 0000000..eefea24 Binary files /dev/null and b/assets/expo.icon/Assets/grid.png differ diff --git a/assets/expo.icon/icon.json b/assets/expo.icon/icon.json new file mode 100644 index 0000000..7a2c33c --- /dev/null +++ b/assets/expo.icon/icon.json @@ -0,0 +1,40 @@ +{ + "fill" : { + "automatic-gradient" : "extended-srgb:0.00000,0.47843,1.00000,1.00000" + }, + "groups" : [ + { + "layers" : [ + { + "image-name" : "expo-symbol 2.svg", + "name" : "expo-symbol 2", + "position" : { + "scale" : 1, + "translation-in-points" : [ + 1.1008400065293245e-05, + -16.046875 + ] + } + }, + { + "image-name" : "grid.png", + "name" : "grid" + } + ], + "shadow" : { + "kind" : "neutral", + "opacity" : 0.5 + }, + "translucency" : { + "enabled" : true, + "value" : 0.5 + } + } + ], + "supported-platforms" : { + "circles" : [ + "watchOS" + ], + "squares" : "shared" + } +} \ No newline at end of file diff --git a/assets/images/android-icon-background.png b/assets/images/android-icon-background.png new file mode 100644 index 0000000..5ffefc5 Binary files /dev/null and b/assets/images/android-icon-background.png differ diff --git a/assets/images/android-icon-foreground.png b/assets/images/android-icon-foreground.png new file mode 100644 index 0000000..3a9e501 Binary files /dev/null and b/assets/images/android-icon-foreground.png differ diff --git a/assets/images/android-icon-monochrome.png b/assets/images/android-icon-monochrome.png new file mode 100644 index 0000000..77484eb Binary files /dev/null and b/assets/images/android-icon-monochrome.png differ diff --git a/assets/images/expo-badge-white.png b/assets/images/expo-badge-white.png new file mode 100644 index 0000000..2863067 Binary files /dev/null and b/assets/images/expo-badge-white.png differ diff --git a/assets/images/expo-badge.png b/assets/images/expo-badge.png new file mode 100644 index 0000000..5d5c5bb Binary files /dev/null and b/assets/images/expo-badge.png differ diff --git a/assets/images/expo-logo.png b/assets/images/expo-logo.png new file mode 100644 index 0000000..6b1642a Binary files /dev/null and b/assets/images/expo-logo.png differ diff --git a/assets/images/favicon.png b/assets/images/favicon.png new file mode 100644 index 0000000..408bd74 Binary files /dev/null and b/assets/images/favicon.png differ diff --git a/assets/images/icon.png b/assets/images/icon.png new file mode 100644 index 0000000..67c777a Binary files /dev/null and b/assets/images/icon.png differ diff --git a/assets/images/logo-glow.png b/assets/images/logo-glow.png new file mode 100644 index 0000000..edc99be Binary files /dev/null and b/assets/images/logo-glow.png differ diff --git a/assets/images/react-logo.png b/assets/images/react-logo.png new file mode 100644 index 0000000..9d72a9f Binary files /dev/null and b/assets/images/react-logo.png differ diff --git a/assets/images/react-logo@2x.png b/assets/images/react-logo@2x.png new file mode 100644 index 0000000..2229b13 Binary files /dev/null and b/assets/images/react-logo@2x.png differ diff --git a/assets/images/react-logo@3x.png b/assets/images/react-logo@3x.png new file mode 100644 index 0000000..a99b203 Binary files /dev/null and b/assets/images/react-logo@3x.png differ diff --git a/assets/images/splash-icon.png b/assets/images/splash-icon.png new file mode 100644 index 0000000..6b1642a Binary files /dev/null and b/assets/images/splash-icon.png differ diff --git a/assets/images/tabIcons/explore.png b/assets/images/tabIcons/explore.png new file mode 100644 index 0000000..73d8258 Binary files /dev/null and b/assets/images/tabIcons/explore.png differ diff --git a/assets/images/tabIcons/explore@2x.png b/assets/images/tabIcons/explore@2x.png new file mode 100644 index 0000000..21b9bd2 Binary files /dev/null and b/assets/images/tabIcons/explore@2x.png differ diff --git a/assets/images/tabIcons/explore@3x.png b/assets/images/tabIcons/explore@3x.png new file mode 100644 index 0000000..422202d Binary files /dev/null and b/assets/images/tabIcons/explore@3x.png differ diff --git a/assets/images/tabIcons/home.png b/assets/images/tabIcons/home.png new file mode 100644 index 0000000..ad5699c Binary files /dev/null and b/assets/images/tabIcons/home.png differ diff --git a/assets/images/tabIcons/home@2x.png b/assets/images/tabIcons/home@2x.png new file mode 100644 index 0000000..22a1f2c Binary files /dev/null and b/assets/images/tabIcons/home@2x.png differ diff --git a/assets/images/tabIcons/home@3x.png b/assets/images/tabIcons/home@3x.png new file mode 100644 index 0000000..f5d1f9a Binary files /dev/null and b/assets/images/tabIcons/home@3x.png differ diff --git a/assets/images/tutorial-web.png b/assets/images/tutorial-web.png new file mode 100644 index 0000000..e4a8c58 Binary files /dev/null and b/assets/images/tutorial-web.png differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..b49f2ec --- /dev/null +++ b/package.json @@ -0,0 +1,43 @@ +{ + "name": "wisp", + "main": "expo-router/entry", + "version": "1.0.0", + "dependencies": { + "@expo/ui": "~56.0.17", + "expo": "~56.0.11", + "expo-constants": "~56.0.18", + "expo-device": "~56.0.4", + "expo-font": "~56.0.6", + "expo-glass-effect": "~56.0.4", + "expo-image": "~56.0.11", + "expo-linking": "~56.0.14", + "expo-router": "~56.2.10", + "expo-splash-screen": "~56.0.10", + "expo-status-bar": "~56.0.4", + "expo-symbols": "~56.0.6", + "expo-system-ui": "~56.0.5", + "expo-web-browser": "~56.0.5", + "react": "19.2.3", + "react-dom": "19.2.3", + "react-native": "0.85.3", + "react-native-gesture-handler": "~2.31.1", + "react-native-reanimated": "4.3.1", + "react-native-safe-area-context": "~5.7.0", + "react-native-screens": "4.25.2", + "react-native-web": "~0.21.0", + "react-native-worklets": "0.8.3" + }, + "devDependencies": { + "@types/react": "~19.2.2", + "typescript": "~6.0.3" + }, + "scripts": { + "start": "expo start", + "reset-project": "node ./scripts/reset-project.js", + "android": "expo start --android", + "ios": "expo start --ios", + "web": "expo start --web", + "lint": "expo lint" + }, + "private": true +} diff --git a/scripts/reset-project.js b/scripts/reset-project.js new file mode 100644 index 0000000..055d15b --- /dev/null +++ b/scripts/reset-project.js @@ -0,0 +1,114 @@ +#!/usr/bin/env node + +/** + * This script is used to reset the project to a blank state. + * It deletes or moves the /src and /scripts directories to /example based on user input and creates a new /src/app directory with an index.tsx and _layout.tsx file. + * You can remove the `reset-project` script from package.json and safely delete this file after running it. + */ + +const fs = require("fs"); +const path = require("path"); +const readline = require("readline"); + +const root = process.cwd(); +const oldDirs = ["src", "scripts"]; +const exampleDir = "example"; +const newAppDir = "src/app"; +const exampleDirPath = path.join(root, exampleDir); + +const indexContent = `import { Text, View, StyleSheet } from "react-native"; + +export default function Index() { + return ( + + Edit src/app/index.tsx to edit this screen. + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, +}); +`; + +const layoutContent = `import { Stack } from "expo-router"; + +export default function RootLayout() { + return ; +} +`; + +const rl = readline.createInterface({ + input: process.stdin, + output: process.stdout, +}); + +const moveDirectories = async (userInput) => { + try { + if (userInput === "y") { + // Create the app-example directory + await fs.promises.mkdir(exampleDirPath, { recursive: true }); + console.log(`šŸ“ /${exampleDir} directory created.`); + } + + // Move old directories to new app-example directory or delete them + for (const dir of oldDirs) { + const oldDirPath = path.join(root, dir); + if (fs.existsSync(oldDirPath)) { + if (userInput === "y") { + const newDirPath = path.join(root, exampleDir, dir); + await fs.promises.rename(oldDirPath, newDirPath); + console.log(`āž”ļø /${dir} moved to /${exampleDir}/${dir}.`); + } else { + await fs.promises.rm(oldDirPath, { recursive: true, force: true }); + console.log(`āŒ /${dir} deleted.`); + } + } else { + console.log(`āž”ļø /${dir} does not exist, skipping.`); + } + } + + // Create new /src/app directory + const newAppDirPath = path.join(root, newAppDir); + await fs.promises.mkdir(newAppDirPath, { recursive: true }); + console.log("\nšŸ“ New /src/app directory created."); + + // Create index.tsx + const indexPath = path.join(newAppDirPath, "index.tsx"); + await fs.promises.writeFile(indexPath, indexContent); + console.log("šŸ“„ src/app/index.tsx created."); + + // Create _layout.tsx + const layoutPath = path.join(newAppDirPath, "_layout.tsx"); + await fs.promises.writeFile(layoutPath, layoutContent); + console.log("šŸ“„ src/app/_layout.tsx created."); + + console.log("\nāœ… Project reset complete. Next steps:"); + console.log( + `1. Run \`npx expo start\` to start a development server.\n2. Edit src/app/index.tsx to edit the main screen.\n3. Put all your application code in /src, only screens and layout files should be in /src/app.${ + userInput === "y" + ? `\n4. Delete the /${exampleDir} directory when you're done referencing it.` + : "" + }` + ); + } catch (error) { + console.error(`āŒ Error during script execution: ${error.message}`); + } +}; + +rl.question( + "Do you want to move existing files to /example instead of deleting them? (Y/n): ", + (answer) => { + const userInput = answer.trim().toLowerCase() || "y"; + if (userInput === "y" || userInput === "n") { + moveDirectories(userInput).finally(() => rl.close()); + } else { + console.log("āŒ Invalid input. Please enter 'Y' or 'N'."); + rl.close(); + } + } +); diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx new file mode 100644 index 0000000..b58e11f --- /dev/null +++ b/src/app/_layout.tsx @@ -0,0 +1,15 @@ +import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router'; +import { useColorScheme } from 'react-native'; + +import { AnimatedSplashOverlay } from '@/components/animated-icon'; +import AppTabs from '@/components/app-tabs'; + +export default function TabLayout() { + const colorScheme = useColorScheme(); + return ( + + + + + ); +} diff --git a/src/app/explore.tsx b/src/app/explore.tsx new file mode 100644 index 0000000..2934085 --- /dev/null +++ b/src/app/explore.tsx @@ -0,0 +1,180 @@ +import { Image } from 'expo-image'; +import { SymbolView } from 'expo-symbols'; +import { Platform, Pressable, ScrollView, StyleSheet } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; + +import { ExternalLink } from '@/components/external-link'; +import { ThemedText } from '@/components/themed-text'; +import { ThemedView } from '@/components/themed-view'; +import { Collapsible } from '@/components/ui/collapsible'; +import { WebBadge } from '@/components/web-badge'; +import { BottomTabInset, MaxContentWidth, Spacing } from '@/constants/theme'; +import { useTheme } from '@/hooks/use-theme'; + +export default function TabTwoScreen() { + const safeAreaInsets = useSafeAreaInsets(); + const insets = { + ...safeAreaInsets, + bottom: safeAreaInsets.bottom + BottomTabInset + Spacing.three, + }; + const theme = useTheme(); + + const contentPlatformStyle = Platform.select({ + android: { + paddingTop: insets.top, + paddingLeft: insets.left, + paddingRight: insets.right, + paddingBottom: insets.bottom, + }, + web: { + paddingTop: Spacing.six, + paddingBottom: Spacing.four, + }, + }); + + return ( + + + + Explore + + This starter app includes example{'\n'}code to help you get started. + + + + pressed && styles.pressed}> + + Expo documentation + + + + + + + + + + This app has two screens: src/app/index.tsx and{' '} + src/app/explore.tsx + + + The layout file in src/app/_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{' '} + src/components/ui/collapsible.tsx component uses + the powerful react-native-reanimated library to + animate opening this hint. + + + + {Platform.OS === 'web' && } + + + ); +} + +const styles = StyleSheet.create({ + scrollView: { + flex: 1, + }, + contentContainer: { + flexDirection: 'row', + justifyContent: 'center', + }, + container: { + maxWidth: MaxContentWidth, + flexGrow: 1, + }, + titleContainer: { + gap: Spacing.three, + alignItems: 'center', + paddingHorizontal: Spacing.four, + paddingVertical: Spacing.six, + }, + centerText: { + textAlign: 'center', + }, + pressed: { + opacity: 0.7, + }, + linkButton: { + flexDirection: 'row', + paddingHorizontal: Spacing.four, + paddingVertical: Spacing.two, + borderRadius: Spacing.five, + justifyContent: 'center', + gap: Spacing.one, + alignItems: 'center', + }, + sectionsWrapper: { + gap: Spacing.five, + paddingHorizontal: Spacing.four, + paddingTop: Spacing.three, + }, + collapsibleContent: { + alignItems: 'center', + }, + imageTutorial: { + width: '100%', + aspectRatio: 296 / 171, + borderRadius: Spacing.three, + marginTop: Spacing.two, + }, + imageReact: { + width: 100, + height: 100, + alignSelf: 'center', + }, +}); diff --git a/src/app/index.tsx b/src/app/index.tsx new file mode 100644 index 0000000..8ec3e6f --- /dev/null +++ b/src/app/index.tsx @@ -0,0 +1,98 @@ +import * as Device from 'expo-device'; +import { Platform, StyleSheet } from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; + +import { AnimatedIcon } from '@/components/animated-icon'; +import { HintRow } from '@/components/hint-row'; +import { ThemedText } from '@/components/themed-text'; +import { ThemedView } from '@/components/themed-view'; +import { WebBadge } from '@/components/web-badge'; +import { BottomTabInset, MaxContentWidth, Spacing } from '@/constants/theme'; + +function getDevMenuHint() { + if (Platform.OS === 'web') { + return use browser devtools; + } + if (Device.isDevice) { + return ( + + shake device or press m in terminal + + ); + } + const shortcut = Platform.OS === 'android' ? 'cmd+m (or ctrl+m)' : 'cmd+d'; + return ( + + press {shortcut} + + ); +} + +export default function HomeScreen() { + return ( + + + + + + Welcome to Expo + + + + + get started + + + + src/app/index.tsx} + /> + + npm run reset-project} + /> + + + {Platform.OS === 'web' && } + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + flexDirection: 'row', + }, + safeArea: { + flex: 1, + paddingHorizontal: Spacing.four, + alignItems: 'center', + gap: Spacing.three, + paddingBottom: BottomTabInset + Spacing.three, + maxWidth: MaxContentWidth, + }, + heroSection: { + alignItems: 'center', + justifyContent: 'center', + flex: 1, + paddingHorizontal: Spacing.four, + gap: Spacing.four, + }, + title: { + textAlign: 'center', + }, + code: { + textTransform: 'uppercase', + }, + stepContainer: { + gap: Spacing.three, + alignSelf: 'stretch', + paddingHorizontal: Spacing.three, + paddingVertical: Spacing.four, + borderRadius: Spacing.four, + }, +}); diff --git a/src/components/animated-icon.module.css b/src/components/animated-icon.module.css new file mode 100644 index 0000000..f8156fe --- /dev/null +++ b/src/components/animated-icon.module.css @@ -0,0 +1,6 @@ +.expoLogoBackground { + background-image: linear-gradient(180deg, #3c9ffe, #0274df); + border-radius: 40px; + width: 128px; + height: 128px; +} diff --git a/src/components/animated-icon.tsx b/src/components/animated-icon.tsx new file mode 100644 index 0000000..9d900a8 --- /dev/null +++ b/src/components/animated-icon.tsx @@ -0,0 +1,132 @@ +import { Image } from 'expo-image'; +import { useState } from 'react'; +import { Dimensions, StyleSheet, View } from 'react-native'; +import Animated, { Easing, Keyframe } from 'react-native-reanimated'; +import { scheduleOnRN } from 'react-native-worklets'; + +const INITIAL_SCALE_FACTOR = Dimensions.get('screen').height / 90; +const DURATION = 600; + +export function AnimatedSplashOverlay() { + const [visible, setVisible] = useState(true); + + if (!visible) return null; + + const splashKeyframe = new Keyframe({ + 0: { + transform: [{ scale: INITIAL_SCALE_FACTOR }], + opacity: 1, + }, + 20: { + opacity: 1, + }, + 70: { + opacity: 0, + easing: Easing.elastic(0.7), + }, + 100: { + opacity: 0, + transform: [{ scale: 1 }], + easing: Easing.elastic(0.7), + }, + }); + + return ( + { + 'worklet'; + if (finished) { + scheduleOnRN(setVisible, false); + } + })} + style={styles.backgroundSolidColor} + /> + ); +} + +const keyframe = new Keyframe({ + 0: { + transform: [{ scale: INITIAL_SCALE_FACTOR }], + }, + 100: { + transform: [{ scale: 1 }], + easing: Easing.elastic(0.7), + }, +}); + +const logoKeyframe = new Keyframe({ + 0: { + transform: [{ scale: 1.3 }], + opacity: 0, + }, + 40: { + transform: [{ scale: 1.3 }], + opacity: 0, + easing: Easing.elastic(0.7), + }, + 100: { + opacity: 1, + transform: [{ scale: 1 }], + easing: Easing.elastic(0.7), + }, +}); + +const glowKeyframe = new Keyframe({ + 0: { + transform: [{ rotateZ: '0deg' }], + }, + 100: { + transform: [{ rotateZ: '7200deg' }], + }, +}); + +export function AnimatedIcon() { + return ( + + + + + + + + + + + ); +} + +const styles = StyleSheet.create({ + imageContainer: { + justifyContent: 'center', + alignItems: 'center', + }, + glow: { + width: 201, + height: 201, + position: 'absolute', + }, + iconContainer: { + justifyContent: 'center', + alignItems: 'center', + width: 128, + height: 128, + zIndex: 100, + }, + image: { + position: 'absolute', + width: 76, + height: 71, + }, + background: { + borderRadius: 40, + experimental_backgroundImage: `linear-gradient(180deg, #3C9FFE, #0274DF)`, + width: 128, + height: 128, + position: 'absolute', + }, + backgroundSolidColor: { + ...StyleSheet.absoluteFill, + backgroundColor: '#208AEF', + zIndex: 1000, + }, +}); diff --git a/src/components/animated-icon.web.tsx b/src/components/animated-icon.web.tsx new file mode 100644 index 0000000..dfbb1fd --- /dev/null +++ b/src/components/animated-icon.web.tsx @@ -0,0 +1,108 @@ +import { Image } from 'expo-image'; +import { StyleSheet, View } from 'react-native'; +import Animated, { Keyframe, Easing } from 'react-native-reanimated'; + +import classes from './animated-icon.module.css'; +const DURATION = 300; + +export function AnimatedSplashOverlay() { + return null; +} + +const keyframe = new Keyframe({ + 0: { + transform: [{ scale: 0 }], + }, + 60: { + transform: [{ scale: 1.2 }], + easing: Easing.elastic(1.2), + }, + 100: { + transform: [{ scale: 1 }], + easing: Easing.elastic(1.2), + }, +}); + +const logoKeyframe = new Keyframe({ + 0: { + opacity: 0, + }, + 60: { + transform: [{ scale: 1.2 }], + opacity: 0, + easing: Easing.elastic(1.2), + }, + 100: { + transform: [{ scale: 1 }], + opacity: 1, + easing: Easing.elastic(1.2), + }, +}); + +const glowKeyframe = new Keyframe({ + 0: { + transform: [{ rotateZ: '-180deg' }, { scale: 0.8 }], + opacity: 0, + }, + [DURATION / 1000]: { + transform: [{ rotateZ: '0deg' }, { scale: 1 }], + opacity: 1, + easing: Easing.elastic(0.7), + }, + 100: { + transform: [{ rotateZ: '7200deg' }], + }, +}); + +export function AnimatedIcon() { + return ( + + + + + + +
+ + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + width: '100%', + zIndex: 1000, + position: 'absolute', + top: 128 / 2 + 138, + }, + imageContainer: { + justifyContent: 'center', + alignItems: 'center', + }, + glow: { + width: 201, + height: 201, + position: 'absolute', + }, + iconContainer: { + justifyContent: 'center', + alignItems: 'center', + width: 128, + height: 128, + }, + image: { + position: 'absolute', + width: 76, + height: 71, + }, + background: { + width: 128, + height: 128, + position: 'absolute', + }, +}); diff --git a/src/components/app-tabs.tsx b/src/components/app-tabs.tsx new file mode 100644 index 0000000..80719bc --- /dev/null +++ b/src/components/app-tabs.tsx @@ -0,0 +1,32 @@ +import { NativeTabs } from 'expo-router/unstable-native-tabs'; +import { useColorScheme } from 'react-native'; + +import { Colors } from '@/constants/theme'; + +export default function AppTabs() { + const scheme = useColorScheme(); + const colors = Colors[scheme === 'unspecified' ? 'light' : scheme]; + + return ( + + + Home + + + + + Explore + + + + ); +} diff --git a/src/components/app-tabs.web.tsx b/src/components/app-tabs.web.tsx new file mode 100644 index 0000000..ca2787d --- /dev/null +++ b/src/components/app-tabs.web.tsx @@ -0,0 +1,115 @@ +import { + Tabs, + TabList, + TabTrigger, + TabSlot, + TabTriggerSlotProps, + TabListProps, +} from 'expo-router/ui'; +import { SymbolView } from 'expo-symbols'; +import { Pressable, useColorScheme, View, StyleSheet } from 'react-native'; + +import { ExternalLink } from './external-link'; +import { ThemedText } from './themed-text'; +import { ThemedView } from './themed-view'; + +import { Colors, MaxContentWidth, Spacing } from '@/constants/theme'; + +export default function AppTabs() { + return ( + + + + + + Home + + + Explore + + + + + ); +} + +export function TabButton({ children, isFocused, ...props }: TabTriggerSlotProps) { + return ( + pressed && styles.pressed}> + + + {children} + + + + ); +} + +export function CustomTabList(props: TabListProps) { + const scheme = useColorScheme(); + const colors = Colors[scheme === 'unspecified' ? 'light' : scheme]; + + return ( + + + + Expo Starter + + + {props.children} + + + + Docs + + + + + + ); +} + +const styles = StyleSheet.create({ + tabListContainer: { + position: 'absolute', + width: '100%', + padding: Spacing.three, + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'row', + }, + innerContainer: { + paddingVertical: Spacing.two, + paddingHorizontal: Spacing.five, + borderRadius: Spacing.five, + flexDirection: 'row', + alignItems: 'center', + flexGrow: 1, + gap: Spacing.two, + maxWidth: MaxContentWidth, + }, + brandText: { + marginRight: 'auto', + }, + pressed: { + opacity: 0.7, + }, + tabButtonView: { + paddingVertical: Spacing.one, + paddingHorizontal: Spacing.three, + borderRadius: Spacing.three, + }, + externalPressable: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + gap: Spacing.one, + marginLeft: Spacing.three, + }, +}); diff --git a/src/components/external-link.tsx b/src/components/external-link.tsx new file mode 100644 index 0000000..883e515 --- /dev/null +++ b/src/components/external-link.tsx @@ -0,0 +1,25 @@ +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/src/components/hint-row.tsx b/src/components/hint-row.tsx new file mode 100644 index 0000000..acf4dc5 --- /dev/null +++ b/src/components/hint-row.tsx @@ -0,0 +1,35 @@ +import type { ReactNode } from 'react'; +import { View, StyleSheet } from 'react-native'; + +import { ThemedText } from './themed-text'; +import { ThemedView } from './themed-view'; + +import { Spacing } from '@/constants/theme'; + +type HintRowProps = { + title?: string; + hint?: ReactNode; +}; + +export function HintRow({ title = 'Try editing', hint = 'app/index.tsx' }: HintRowProps) { + return ( + + {title} + + {hint} + + + ); +} + +const styles = StyleSheet.create({ + stepRow: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + codeSnippet: { + borderRadius: Spacing.two, + paddingVertical: Spacing.half, + paddingHorizontal: Spacing.two, + }, +}); diff --git a/src/components/themed-text.tsx b/src/components/themed-text.tsx new file mode 100644 index 0000000..799c8b1 --- /dev/null +++ b/src/components/themed-text.tsx @@ -0,0 +1,73 @@ +import { Platform, StyleSheet, Text, type TextProps } from 'react-native'; + +import { Fonts, ThemeColor } from '@/constants/theme'; +import { useTheme } from '@/hooks/use-theme'; + +export type ThemedTextProps = TextProps & { + type?: 'default' | 'title' | 'small' | 'smallBold' | 'subtitle' | 'link' | 'linkPrimary' | 'code'; + themeColor?: ThemeColor; +}; + +export function ThemedText({ style, type = 'default', themeColor, ...rest }: ThemedTextProps) { + const theme = useTheme(); + + return ( + + ); +} + +const styles = StyleSheet.create({ + small: { + fontSize: 14, + lineHeight: 20, + fontWeight: 500, + }, + smallBold: { + fontSize: 14, + lineHeight: 20, + fontWeight: 700, + }, + default: { + fontSize: 16, + lineHeight: 24, + fontWeight: 500, + }, + title: { + fontSize: 48, + fontWeight: 600, + lineHeight: 52, + }, + subtitle: { + fontSize: 32, + lineHeight: 44, + fontWeight: 600, + }, + link: { + lineHeight: 30, + fontSize: 14, + }, + linkPrimary: { + lineHeight: 30, + fontSize: 14, + color: '#3c87f7', + }, + code: { + fontFamily: Fonts.mono, + fontWeight: Platform.select({ android: 700 }) ?? 500, + fontSize: 12, + }, +}); diff --git a/src/components/themed-view.tsx b/src/components/themed-view.tsx new file mode 100644 index 0000000..c710df9 --- /dev/null +++ b/src/components/themed-view.tsx @@ -0,0 +1,16 @@ +import { View, type ViewProps } from 'react-native'; + +import { ThemeColor } from '@/constants/theme'; +import { useTheme } from '@/hooks/use-theme'; + +export type ThemedViewProps = ViewProps & { + lightColor?: string; + darkColor?: string; + type?: ThemeColor; +}; + +export function ThemedView({ style, lightColor, darkColor, type, ...otherProps }: ThemedViewProps) { + const theme = useTheme(); + + return ; +} diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx new file mode 100644 index 0000000..d0d745b --- /dev/null +++ b/src/components/ui/collapsible.tsx @@ -0,0 +1,65 @@ +import { SymbolView } from 'expo-symbols'; +import { PropsWithChildren, useState } from 'react'; +import { Pressable, StyleSheet } from 'react-native'; +import Animated, { FadeIn } from 'react-native-reanimated'; + +import { ThemedText } from '@/components/themed-text'; +import { ThemedView } from '@/components/themed-view'; +import { Spacing } from '@/constants/theme'; +import { useTheme } from '@/hooks/use-theme'; + +export function Collapsible({ children, title }: PropsWithChildren & { title: string }) { + const [isOpen, setIsOpen] = useState(false); + const theme = useTheme(); + + return ( + + [styles.heading, pressed && styles.pressedHeading]} + onPress={() => setIsOpen((value) => !value)}> + + + + + {title} + + {isOpen && ( + + + {children} + + + )} + + ); +} + +const styles = StyleSheet.create({ + heading: { + flexDirection: 'row', + alignItems: 'center', + gap: Spacing.two, + }, + pressedHeading: { + opacity: 0.7, + }, + button: { + width: Spacing.four, + height: Spacing.four, + borderRadius: 12, + justifyContent: 'center', + alignItems: 'center', + }, + content: { + marginTop: Spacing.three, + borderRadius: Spacing.three, + marginLeft: Spacing.four, + padding: Spacing.four, + }, +}); diff --git a/src/components/web-badge.tsx b/src/components/web-badge.tsx new file mode 100644 index 0000000..6667898 --- /dev/null +++ b/src/components/web-badge.tsx @@ -0,0 +1,43 @@ +import { version } from 'expo/package.json'; +import { Image } from 'expo-image'; +import { useColorScheme, StyleSheet } from 'react-native'; + +import { ThemedText } from './themed-text'; +import { ThemedView } from './themed-view'; + +import { Spacing } from '@/constants/theme'; + +export function WebBadge() { + const scheme = useColorScheme(); + + return ( + + + v{version} + + + + ); +} + +const styles = StyleSheet.create({ + container: { + padding: Spacing.five, + alignItems: 'center', + gap: Spacing.two, + }, + versionText: { + textAlign: 'center', + }, + badgeImage: { + width: 123, + aspectRatio: 123 / 24, + }, +}); diff --git a/src/constants/theme.ts b/src/constants/theme.ts new file mode 100644 index 0000000..c10ed27 --- /dev/null +++ b/src/constants/theme.ts @@ -0,0 +1,65 @@ +/** + * Below are the colors that are used in the app. The colors are defined in the light and dark mode. + * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc. + */ + +import '@/global.css'; + +import { Platform } from 'react-native'; + +export const Colors = { + light: { + text: '#000000', + background: '#ffffff', + backgroundElement: '#F0F0F3', + backgroundSelected: '#E0E1E6', + textSecondary: '#60646C', + }, + dark: { + text: '#ffffff', + background: '#000000', + backgroundElement: '#212225', + backgroundSelected: '#2E3135', + textSecondary: '#B0B4BA', + }, +} as const; + +export type ThemeColor = keyof typeof Colors.light & keyof typeof Colors.dark; + +export const Fonts = Platform.select({ + ios: { + /** iOS `UIFontDescriptorSystemDesignDefault` */ + sans: 'system-ui', + /** iOS `UIFontDescriptorSystemDesignSerif` */ + serif: 'ui-serif', + /** iOS `UIFontDescriptorSystemDesignRounded` */ + rounded: 'ui-rounded', + /** iOS `UIFontDescriptorSystemDesignMonospaced` */ + mono: 'ui-monospace', + }, + default: { + sans: 'normal', + serif: 'serif', + rounded: 'normal', + mono: 'monospace', + }, + web: { + sans: 'var(--font-display)', + serif: 'var(--font-serif)', + rounded: 'var(--font-rounded)', + mono: 'var(--font-mono)', + }, +}); + +export const Spacing = { + half: 2, + one: 4, + two: 8, + three: 16, + four: 24, + five: 32, + six: 64, +} as const; + +export const BottomTabInset = Platform.select({ ios: 50, android: 80 }) ?? 0; +export const MaxContentWidth = 800; diff --git a/src/global.css b/src/global.css new file mode 100644 index 0000000..c8fe503 --- /dev/null +++ b/src/global.css @@ -0,0 +1,9 @@ +:root { + --font-display: + Spline Sans, Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; + --font-mono: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; + --font-rounded: 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif; + --font-serif: Georgia, 'Times New Roman', serif; +} diff --git a/src/hooks/use-color-scheme.ts b/src/hooks/use-color-scheme.ts new file mode 100644 index 0000000..17e3c63 --- /dev/null +++ b/src/hooks/use-color-scheme.ts @@ -0,0 +1 @@ +export { useColorScheme } from 'react-native'; diff --git a/src/hooks/use-color-scheme.web.ts b/src/hooks/use-color-scheme.web.ts new file mode 100644 index 0000000..7eb1c1b --- /dev/null +++ b/src/hooks/use-color-scheme.web.ts @@ -0,0 +1,21 @@ +import { useEffect, useState } from 'react'; +import { useColorScheme as useRNColorScheme } from 'react-native'; + +/** + * To support static rendering, this value needs to be re-calculated on the client side for web + */ +export function useColorScheme() { + const [hasHydrated, setHasHydrated] = useState(false); + + useEffect(() => { + setHasHydrated(true); + }, []); + + const colorScheme = useRNColorScheme(); + + if (hasHydrated) { + return colorScheme; + } + + return 'light'; +} diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts new file mode 100644 index 0000000..677e015 --- /dev/null +++ b/src/hooks/use-theme.ts @@ -0,0 +1,14 @@ +/** + * Learn more about light and dark modes: + * https://docs.expo.dev/guides/color-schemes/ + */ + +import { Colors } from '@/constants/theme'; +import { useColorScheme } from '@/hooks/use-color-scheme'; + +export function useTheme() { + const scheme = useColorScheme(); + const theme = scheme === 'unspecified' ? 'light' : scheme; + + return Colors[theme]; +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..2e9a669 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,20 @@ +{ + "extends": "expo/tsconfig.base", + "compilerOptions": { + "strict": true, + "paths": { + "@/*": [ + "./src/*" + ], + "@/assets/*": [ + "./assets/*" + ] + } + }, + "include": [ + "**/*.ts", + "**/*.tsx", + ".expo/types/**/*.ts", + "expo-env.d.ts" + ] +}