-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
41 changed files
with
15,109 additions
and
143 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| # 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 | ||
| *.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 | ||
|
|
||
| app-example |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| node-linker=hoisted |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| { | ||
| "expo": { | ||
| "name": "metro-now", | ||
| "slug": "metro-now", | ||
| "version": "1.0.0", | ||
| "orientation": "portrait", | ||
| "icon": "./assets/images/icon.png", | ||
| "scheme": "myapp", | ||
| "userInterfaceStyle": "automatic", | ||
| "newArchEnabled": true, | ||
| "ios": { | ||
| "supportsTablet": true | ||
| }, | ||
| "android": { | ||
| "adaptiveIcon": { | ||
| "foregroundImage": "./assets/images/adaptive-icon.png", | ||
| "backgroundColor": "#ffffff" | ||
| } | ||
| }, | ||
| "web": { | ||
| "bundler": "metro", | ||
| "output": "static", | ||
| "favicon": "./assets/images/favicon.png" | ||
| }, | ||
| "plugins": [ | ||
| "expo-router", | ||
| [ | ||
| "expo-splash-screen", | ||
| { | ||
| "image": "./assets/images/splash-icon.png", | ||
| "imageWidth": 200, | ||
| "resizeMode": "contain", | ||
| "backgroundColor": "#ffffff" | ||
| } | ||
| ] | ||
| ], | ||
| "experiments": { | ||
| "typedRoutes": true | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { Tabs } from "expo-router"; | ||
| import React from "react"; | ||
| import { Platform } from "react-native"; | ||
|
|
||
| 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 colorScheme = useColorScheme(); | ||
|
|
||
| return ( | ||
| <Tabs | ||
| screenOptions={{ | ||
| tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint, | ||
| headerShown: false, | ||
| tabBarButton: HapticTab, | ||
| tabBarBackground: TabBarBackground, | ||
| tabBarStyle: Platform.select({ | ||
| ios: { | ||
| // Use a transparent background on iOS to show the blur effect | ||
| position: "absolute", | ||
| }, | ||
| default: {}, | ||
| }), | ||
| }} | ||
| > | ||
| <Tabs.Screen | ||
| name="index" | ||
| options={{ | ||
| title: "Home", | ||
| tabBarIcon: ({ color }) => ( | ||
| <IconSymbol size={28} name="house.fill" color={color} /> | ||
| ), | ||
| }} | ||
| /> | ||
| <Tabs.Screen | ||
| name="explore" | ||
| options={{ | ||
| title: "Explore", | ||
| tabBarIcon: ({ color }) => ( | ||
| <IconSymbol | ||
| size={28} | ||
| name="paperplane.fill" | ||
| color={color} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| </Tabs> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| import { StyleSheet, Image, Platform } from "react-native"; | ||
|
|
||
| import { Collapsible } from "@/components/Collapsible"; | ||
| import { ExternalLink } from "@/components/ExternalLink"; | ||
| import ParallaxScrollView from "@/components/ParallaxScrollView"; | ||
| import { ThemedText } from "@/components/ThemedText"; | ||
| import { ThemedView } from "@/components/ThemedView"; | ||
| import { IconSymbol } from "@/components/ui/IconSymbol"; | ||
|
|
||
| export default function TabTwoScreen() { | ||
| return ( | ||
| <ParallaxScrollView | ||
| headerBackgroundColor={{ light: "#D0D0D0", dark: "#353636" }} | ||
| headerImage={ | ||
| <IconSymbol | ||
| size={310} | ||
| color="#808080" | ||
| name="chevron.left.forwardslash.chevron.right" | ||
| style={styles.headerImage} | ||
| /> | ||
| } | ||
| > | ||
| <ThemedView style={styles.titleContainer}> | ||
| <ThemedText type="title">Explore</ThemedText> | ||
| </ThemedView> | ||
| <ThemedText> | ||
| This app includes example code to help you get started. | ||
| </ThemedText> | ||
| <Collapsible title="File-based routing"> | ||
| <ThemedText> | ||
| This app has two screens:{" "} | ||
| <ThemedText type="defaultSemiBold"> | ||
| app/(tabs)/index.tsx | ||
| </ThemedText>{" "} | ||
| and{" "} | ||
| <ThemedText type="defaultSemiBold"> | ||
| app/(tabs)/explore.tsx | ||
| </ThemedText> | ||
| </ThemedText> | ||
| <ThemedText> | ||
| The layout file in{" "} | ||
| <ThemedText type="defaultSemiBold"> | ||
| app/(tabs)/_layout.tsx | ||
| </ThemedText>{" "} | ||
| sets up the tab navigator. | ||
| </ThemedText> | ||
| <ExternalLink href="https://docs.expo.dev/router/introduction"> | ||
| <ThemedText type="link">Learn more</ThemedText> | ||
| </ExternalLink> | ||
| </Collapsible> | ||
| <Collapsible title="Android, iOS, and web support"> | ||
| <ThemedText> | ||
| You can open this project on Android, iOS, and the web. To | ||
| open the web version, press{" "} | ||
| <ThemedText type="defaultSemiBold">w</ThemedText> in the | ||
| terminal running this project. | ||
| </ThemedText> | ||
| </Collapsible> | ||
| <Collapsible title="Images"> | ||
| <ThemedText> | ||
| For static images, you can use the{" "} | ||
| <ThemedText type="defaultSemiBold">@2x</ThemedText> and{" "} | ||
| <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes | ||
| to provide files for different screen densities | ||
| </ThemedText> | ||
| <Image | ||
| source={require("@/assets/images/react-logo.png")} | ||
| style={{ alignSelf: "center" }} | ||
| /> | ||
| <ExternalLink href="https://reactnative.dev/docs/images"> | ||
| <ThemedText type="link">Learn more</ThemedText> | ||
| </ExternalLink> | ||
| </Collapsible> | ||
| <Collapsible title="Custom fonts"> | ||
| <ThemedText> | ||
| Open{" "} | ||
| <ThemedText type="defaultSemiBold"> | ||
| app/_layout.tsx | ||
| </ThemedText>{" "} | ||
| to see how to load{" "} | ||
| <ThemedText style={{ fontFamily: "SpaceMono" }}> | ||
| custom fonts such as this one. | ||
| </ThemedText> | ||
| </ThemedText> | ||
| <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font"> | ||
| <ThemedText type="link">Learn more</ThemedText> | ||
| </ExternalLink> | ||
| </Collapsible> | ||
| <Collapsible title="Light and dark mode components"> | ||
| <ThemedText> | ||
| This template has light and dark mode support. The{" "} | ||
| <ThemedText type="defaultSemiBold"> | ||
| useColorScheme() | ||
| </ThemedText>{" "} | ||
| hook lets you inspect what the user's current color scheme | ||
| is, and so you can adjust UI colors accordingly. | ||
| </ThemedText> | ||
| <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/"> | ||
| <ThemedText type="link">Learn more</ThemedText> | ||
| </ExternalLink> | ||
| </Collapsible> | ||
| <Collapsible title="Animations"> | ||
| <ThemedText> | ||
| This template includes an example of an animated component. | ||
| The{" "} | ||
| <ThemedText type="defaultSemiBold"> | ||
| components/HelloWave.tsx | ||
| </ThemedText>{" "} | ||
| component uses the powerful{" "} | ||
| <ThemedText type="defaultSemiBold"> | ||
| react-native-reanimated | ||
| </ThemedText>{" "} | ||
| library to create a waving hand animation. | ||
| </ThemedText> | ||
| {Platform.select({ | ||
| ios: ( | ||
| <ThemedText> | ||
| The{" "} | ||
| <ThemedText type="defaultSemiBold"> | ||
| components/ParallaxScrollView.tsx | ||
| </ThemedText>{" "} | ||
| component provides a parallax effect for the header | ||
| image. | ||
| </ThemedText> | ||
| ), | ||
| })} | ||
| </Collapsible> | ||
| </ParallaxScrollView> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| headerImage: { | ||
| color: "#808080", | ||
| bottom: -90, | ||
| left: -35, | ||
| position: "absolute", | ||
| }, | ||
| titleContainer: { | ||
| flexDirection: "row", | ||
| gap: 8, | ||
| }, | ||
| }); |
Oops, something went wrong.