diff --git a/examples/common_expo/.eslintrc.js b/examples/common_expo/.eslintrc.js new file mode 100644 index 0000000..96fb62d --- /dev/null +++ b/examples/common_expo/.eslintrc.js @@ -0,0 +1,11 @@ +// https://docs.expo.dev/guides/using-eslint/ +module.exports = { + extends: ['expo', 'prettier'], + plugins: ['prettier', 'jest'], + rules: { + 'prettier/prettier': 'error', + }, + env: { + 'jest/globals': true, + }, +}; diff --git a/examples/common_expo/.gitignore b/examples/common_expo/.gitignore new file mode 100644 index 0000000..a6f9507 --- /dev/null +++ b/examples/common_expo/.gitignore @@ -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/ + +# 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 + +# expo-cli +expo-env.d.ts diff --git a/examples/common_expo/.npmrc b/examples/common_expo/.npmrc new file mode 100644 index 0000000..d67f374 --- /dev/null +++ b/examples/common_expo/.npmrc @@ -0,0 +1 @@ +node-linker=hoisted diff --git a/examples/common_expo/.prettierrc b/examples/common_expo/.prettierrc new file mode 100644 index 0000000..a20502b --- /dev/null +++ b/examples/common_expo/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "all" +} diff --git a/examples/common_expo/README.md b/examples/common_expo/README.md new file mode 100644 index 0000000..a7c6e64 --- /dev/null +++ b/examples/common_expo/README.md @@ -0,0 +1,15 @@ +# Common Expo + +## Setup Mobile App + +1. **Install the project dependencies:** + +To install the necessary dependencies for your project, run the following command: + +`pnpm install` + +2. **Start the development server:** + +Once the dependencies are installed, you can start project using the command: + +`pnpm start` diff --git a/examples/common_expo/app.json b/examples/common_expo/app.json new file mode 100644 index 0000000..ae45cc0 --- /dev/null +++ b/examples/common_expo/app.json @@ -0,0 +1,40 @@ +{ + "expo": { + "name": "common_expo", + "slug": "common_expo", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/images/icon.png", + "scheme": "myapp", + "userInterfaceStyle": "automatic", + "splash": { + "image": "./assets/images/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "ios": { + "supportsTablet": true, + "config": { + "usesNonExemptEncryption": false + } + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/images/adaptive-icon.png", + "backgroundColor": "#ffffff" + } + }, + "web": { + "bundler": "metro", + "output": "static", + "favicon": "./assets/images/favicon.png" + }, + "plugins": [ + "expo-router", + "expo-secure-store" + ], + "experiments": { + "typedRoutes": true + } + } +} diff --git a/examples/common_expo/app/(app)/(tabs)/_layout.tsx b/examples/common_expo/app/(app)/(tabs)/_layout.tsx new file mode 100644 index 0000000..886e972 --- /dev/null +++ b/examples/common_expo/app/(app)/(tabs)/_layout.tsx @@ -0,0 +1,46 @@ +import { ComponentProps } from 'react'; +import FontAwesome from '@expo/vector-icons/FontAwesome'; +import { Tabs } from 'expo-router'; + +import Colors from '@/constants/theme/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; + +type TabLayoutProps = { + name: ComponentProps['name']; + color: string; +}; + +// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/ +function TabBarIcon(props: TabLayoutProps) { + return ; +} + +export default function TabLayout() { + const colorScheme = useColorScheme(); + + return ( + + , + }} + /> + , + }} + /> + + ); +} diff --git a/examples/common_expo/app/(app)/(tabs)/index.tsx b/examples/common_expo/app/(app)/(tabs)/index.tsx new file mode 100644 index 0000000..ced072e --- /dev/null +++ b/examples/common_expo/app/(app)/(tabs)/index.tsx @@ -0,0 +1,10 @@ +import { CenterView } from '@/components/CenterView'; +import { Typography } from '@/components/Typography'; + +export default function HomeScreen() { + return ( + + Home screen + + ); +} diff --git a/examples/common_expo/app/(app)/(tabs)/profile.tsx b/examples/common_expo/app/(app)/(tabs)/profile.tsx new file mode 100644 index 0000000..5816c7d --- /dev/null +++ b/examples/common_expo/app/(app)/(tabs)/profile.tsx @@ -0,0 +1,10 @@ +import { CenterView } from '@/components/CenterView'; +import { Typography } from '@/components/Typography'; + +export default function Profile() { + return ( + + Profile screen + + ); +} diff --git a/examples/common_expo/app/(app)/_layout.tsx b/examples/common_expo/app/(app)/_layout.tsx new file mode 100644 index 0000000..01dfab2 --- /dev/null +++ b/examples/common_expo/app/(app)/_layout.tsx @@ -0,0 +1,33 @@ +import { ActivityIndicator, TouchableOpacity } from 'react-native'; +import { Redirect, Stack } from 'expo-router'; +import { useAuth } from '@/providers/AuthProvider'; +import { Typography } from '@/components/Typography'; +import { CenterView } from '@/components/CenterView'; + +export default function AppLayout() { + const { session, isLoading, signOut } = useAuth(); + + if (isLoading) { + return ( + + + + ); + } + + if (!session) { + return ; + } + + return ( + ( + + Logout + + ), + }} + /> + ); +} diff --git a/examples/common_expo/app/+html.tsx b/examples/common_expo/app/+html.tsx new file mode 100644 index 0000000..59dfef5 --- /dev/null +++ b/examples/common_expo/app/+html.tsx @@ -0,0 +1,42 @@ +import { ScrollViewStyleReset } from 'expo-router/html'; +import { PropsWithChildren } from 'react'; + +// This file is web-only and used to configure the root HTML for every +// web page during static rendering. +// The contents of this function only run in Node.js environments and +// do not have access to the DOM or browser APIs. +export default function Root({ children }: PropsWithChildren) { + return ( + + + + + + + {/* + Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. + However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line. + */} + + + {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} +