From ee066aeec8cf9ec52499330d4cff33d8b5af8cf0 Mon Sep 17 00:00:00 2001 From: michalfirszt Date: Fri, 9 Aug 2024 13:47:57 +0200 Subject: [PATCH 01/10] feat: setup expo app --- examples/common_expo/.gitignore | 38 + examples/common_expo/.npmrc | 1 + examples/common_expo/app.json | 36 + examples/common_expo/app/(tabs)/_layout.tsx | 61 + examples/common_expo/app/(tabs)/index.tsx | 31 + examples/common_expo/app/(tabs)/two.tsx | 31 + examples/common_expo/app/+html.tsx | 39 + examples/common_expo/app/+not-found.tsx | 40 + examples/common_expo/app/_layout.tsx | 59 + examples/common_expo/app/modal.tsx | 35 + .../assets/fonts/SpaceMono-Regular.ttf | Bin 0 -> 93252 bytes .../assets/images/adaptive-icon.png | Bin 0 -> 17547 bytes .../common_expo/assets/images/favicon.png | Bin 0 -> 1466 bytes examples/common_expo/assets/images/icon.png | Bin 0 -> 22380 bytes examples/common_expo/assets/images/splash.png | Bin 0 -> 47346 bytes examples/common_expo/babel.config.js | 6 + .../common_expo/components/EditScreenInfo.tsx | 81 + .../common_expo/components/ExternalLink.tsx | 25 + .../common_expo/components/StyledText.tsx | 7 + examples/common_expo/components/Themed.tsx | 45 + .../components/__tests__/StyledText.test.js | 10 + .../common_expo/constants/theme/Colors.ts | 19 + .../common_expo/hooks/useClientOnlyValue.ts | 4 + .../hooks/useClientOnlyValue.web.ts | 13 + examples/common_expo/hooks/useColorScheme.ts | 1 + .../common_expo/hooks/useColorScheme.web.ts | 8 + examples/common_expo/package.json | 43 + examples/common_expo/pnpm-lock.yaml | 10725 ++++++++++++++++ examples/common_expo/tsconfig.json | 17 + 29 files changed, 11375 insertions(+) create mode 100644 examples/common_expo/.gitignore create mode 100644 examples/common_expo/.npmrc create mode 100644 examples/common_expo/app.json create mode 100644 examples/common_expo/app/(tabs)/_layout.tsx create mode 100644 examples/common_expo/app/(tabs)/index.tsx create mode 100644 examples/common_expo/app/(tabs)/two.tsx create mode 100644 examples/common_expo/app/+html.tsx create mode 100644 examples/common_expo/app/+not-found.tsx create mode 100644 examples/common_expo/app/_layout.tsx create mode 100644 examples/common_expo/app/modal.tsx create mode 100755 examples/common_expo/assets/fonts/SpaceMono-Regular.ttf create mode 100644 examples/common_expo/assets/images/adaptive-icon.png create mode 100644 examples/common_expo/assets/images/favicon.png create mode 100644 examples/common_expo/assets/images/icon.png create mode 100644 examples/common_expo/assets/images/splash.png create mode 100644 examples/common_expo/babel.config.js create mode 100644 examples/common_expo/components/EditScreenInfo.tsx create mode 100644 examples/common_expo/components/ExternalLink.tsx create mode 100644 examples/common_expo/components/StyledText.tsx create mode 100644 examples/common_expo/components/Themed.tsx create mode 100644 examples/common_expo/components/__tests__/StyledText.test.js create mode 100644 examples/common_expo/constants/theme/Colors.ts create mode 100644 examples/common_expo/hooks/useClientOnlyValue.ts create mode 100644 examples/common_expo/hooks/useClientOnlyValue.web.ts create mode 100644 examples/common_expo/hooks/useColorScheme.ts create mode 100644 examples/common_expo/hooks/useColorScheme.web.ts create mode 100644 examples/common_expo/package.json create mode 100644 examples/common_expo/pnpm-lock.yaml create mode 100644 examples/common_expo/tsconfig.json 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/app.json b/examples/common_expo/app.json new file mode 100644 index 0000000..25d310c --- /dev/null +++ b/examples/common_expo/app.json @@ -0,0 +1,36 @@ +{ + "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 + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/images/adaptive-icon.png", + "backgroundColor": "#ffffff" + } + }, + "web": { + "bundler": "metro", + "output": "static", + "favicon": "./assets/images/favicon.png" + }, + "plugins": [ + "expo-router" + ], + "experiments": { + "typedRoutes": true + } + } +} diff --git a/examples/common_expo/app/(tabs)/_layout.tsx b/examples/common_expo/app/(tabs)/_layout.tsx new file mode 100644 index 0000000..80283b8 --- /dev/null +++ b/examples/common_expo/app/(tabs)/_layout.tsx @@ -0,0 +1,61 @@ +import { ComponentProps } from 'react'; +import FontAwesome from '@expo/vector-icons/FontAwesome'; +import { Link, Tabs } from 'expo-router'; +import { Pressable } from 'react-native'; + +import Colors from '@/constants/theme/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; +import { useClientOnlyValue } from '@/hooks/useClientOnlyValue'; + +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 ( + + , + headerRight: () => ( + + + {({ pressed }) => ( + + )} + + + ), + }} + /> + , + }} + /> + + ); +} diff --git a/examples/common_expo/app/(tabs)/index.tsx b/examples/common_expo/app/(tabs)/index.tsx new file mode 100644 index 0000000..26e1eda --- /dev/null +++ b/examples/common_expo/app/(tabs)/index.tsx @@ -0,0 +1,31 @@ +import { StyleSheet } from 'react-native'; + +import { EditScreenInfo } from '@/components/EditScreenInfo'; +import { Text, View } from '@/components/Themed'; + +export default function TabOneScreen() { + return ( + + Tab One + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + title: { + fontSize: 20, + fontWeight: 'bold', + }, + separator: { + marginVertical: 30, + height: 1, + width: '80%', + }, +}); diff --git a/examples/common_expo/app/(tabs)/two.tsx b/examples/common_expo/app/(tabs)/two.tsx new file mode 100644 index 0000000..842018b --- /dev/null +++ b/examples/common_expo/app/(tabs)/two.tsx @@ -0,0 +1,31 @@ +import { StyleSheet } from 'react-native'; + +import { EditScreenInfo } from '@/components/EditScreenInfo'; +import { Text, View } from '@/components/Themed'; + +export default function TabTwoScreen() { + return ( + + Tab Two + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + title: { + fontSize: 20, + fontWeight: 'bold', + }, + separator: { + marginVertical: 30, + height: 1, + width: '80%', + }, +}); diff --git a/examples/common_expo/app/+html.tsx b/examples/common_expo/app/+html.tsx new file mode 100644 index 0000000..99a8d90 --- /dev/null +++ b/examples/common_expo/app/+html.tsx @@ -0,0 +1,39 @@ +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. */} +