-
-
Notifications
You must be signed in to change notification settings - Fork 320
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #687 from dohooo/expo-router
Examples Refactoring
- Loading branch information
Showing
466 changed files
with
16,065 additions
and
77,797 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,5 @@ | ||
| --- | ||
| "react-native-reanimated-carousel": patch | ||
| --- | ||
|
|
||
| feat: Add containerStyle prop to control the container styles. |
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
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 |
|---|---|---|
|
|
@@ -3,5 +3,5 @@ | |
| "rules": { | ||
| "@typescript-eslint/no-use-before-define": "off", | ||
| "no-console": "off" | ||
| }, | ||
| } | ||
| } | ||
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
File renamed without changes.
File renamed without changes.
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,35 @@ | ||
| { | ||
| "expo": { | ||
| "name": "app", | ||
| "slug": "app", | ||
| "version": "1.0.0", | ||
| "orientation": "portrait", | ||
| "icon": "./assets/images/icon.png", | ||
| "scheme": "myapp", | ||
| "userInterfaceStyle": "light", | ||
| "splash": { | ||
| "image": "./assets/images/splash.png", | ||
| "resizeMode": "contain", | ||
| "backgroundColor": "#ffffff" | ||
| }, | ||
| "ios": { | ||
| "supportsTablet": true, | ||
| "bundleIdentifier": "com.react-native-reanimated-carousel.example" | ||
| }, | ||
| "android": { | ||
| "adaptiveIcon": { | ||
| "foregroundImage": "./assets/images/adaptive-icon.png", | ||
| "backgroundColor": "#ffffff" | ||
| } | ||
| }, | ||
| "web": { | ||
| "bundler": "metro", | ||
| "output": "static", | ||
| "favicon": "./assets/images/favicon.png" | ||
| }, | ||
| "plugins": ["expo-router", "expo-font"], | ||
| "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,47 @@ | ||
| import { ScrollViewStyleReset } from "expo-router/html"; | ||
| import { WebProvider } from "@/store/WebProvider"; | ||
| import { MAX_WIDTH } from "@/constants/sizes"; | ||
|
|
||
| // 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 }: { children: React.ReactNode }) { | ||
| return ( | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charSet="utf-8" /> | ||
| <meta httpEquiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1" | ||
| /> | ||
|
|
||
| {/* | ||
| 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. | ||
| */} | ||
| <ScrollViewStyleReset /> | ||
|
|
||
| {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} | ||
| <style | ||
| dangerouslySetInnerHTML={{ | ||
| __html: viewportStyles, | ||
| }} | ||
| /> | ||
|
|
||
| {/* Add any additional <head> elements that you want globally available on web... */} | ||
| </head> | ||
| <body> | ||
| <WebProvider>{children}</WebProvider> | ||
| </body> | ||
| </html> | ||
| ); | ||
| } | ||
|
|
||
| const viewportStyles = ` | ||
| html, body { | ||
| max-width: ${MAX_WIDTH}px; | ||
| margin: 0 auto; | ||
| } | ||
| `; |
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,39 @@ | ||
| import { Link, Stack as RouterStack } from "expo-router"; | ||
| import { StyleSheet } from "react-native"; | ||
| import { Stack, Text } from "tamagui"; | ||
|
|
||
| export default function NotFoundScreen() { | ||
| return ( | ||
| <> | ||
| <RouterStack.Screen options={{ title: "Oops!" }} /> | ||
| <Stack style={styles.container}> | ||
| <Text style={styles.title}>This screen doesn't exist.</Text> | ||
|
|
||
| <Link href="/" style={styles.link} replace> | ||
| <Text style={styles.linkText}>Go to home screen!</Text> | ||
| </Link> | ||
| </Stack> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| padding: 20, | ||
| }, | ||
| title: { | ||
| fontSize: 20, | ||
| fontWeight: "bold", | ||
| }, | ||
| link: { | ||
| marginTop: 15, | ||
| paddingVertical: 15, | ||
| }, | ||
| linkText: { | ||
| fontSize: 14, | ||
| color: "#2e78b7", | ||
| }, | ||
| }); |
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,131 @@ | ||
| import { useEffect, useState } from "react"; | ||
| import { I18nManager, View } from "react-native"; | ||
| import { GestureHandlerRootView } from "react-native-gesture-handler"; | ||
| import { TamaguiProvider } from "tamagui"; | ||
| import { tamaguiConfig } from "../tamagui.config"; | ||
|
|
||
| import FontAwesome from "@expo/vector-icons/FontAwesome"; | ||
| import { DefaultTheme, ThemeProvider } from "@react-navigation/native"; | ||
| import { useFonts } from "expo-font"; | ||
| import * as SplashScreen from "expo-splash-screen"; | ||
| import "react-native-reanimated"; | ||
| import Stack from "expo-router/stack"; | ||
| import { useWebContext } from "@/store/WebProvider"; | ||
| import { CaptureProvider } from "@/store/CaptureProvider"; | ||
| import { HeaderRight } from "@/components/HeaderRight"; | ||
| import { routes } from "./routes"; | ||
| import { | ||
| useGlobalSearchParams, | ||
| useLocalSearchParams, | ||
| useNavigation, | ||
| usePathname, | ||
| } from "expo-router"; | ||
| import { useInDoc } from "@/hooks/useInDoc"; | ||
| import { IS_WEB } from "@/constants/platform"; | ||
|
|
||
| export { | ||
| // Catch any errors thrown by the Layout component. | ||
| ErrorBoundary, | ||
| } from "expo-router"; | ||
|
|
||
| export const unstable_settings = { | ||
| initialRouteName: "index", | ||
| }; | ||
|
|
||
| // Prevent the splash screen from auto-hiding before asset loading is complete. | ||
| SplashScreen.preventAutoHideAsync(); | ||
|
|
||
| export default function RootLayout() { | ||
| const [loaded, error] = useFonts({ | ||
| Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"), | ||
| InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf"), | ||
| SpaceMono: require("@/assets/fonts/SpaceMono-Regular.ttf"), | ||
| ...FontAwesome.font, | ||
| }); | ||
|
|
||
| // Expo Router uses Error Boundaries to catch errors in the navigation tree. | ||
| useEffect(() => { | ||
| if (error) throw error; | ||
| }, [error]); | ||
|
|
||
| useEffect(() => { | ||
| if (loaded) SplashScreen.hideAsync(); | ||
| }, [loaded]); | ||
|
|
||
| if (!loaded) return null; | ||
|
|
||
| return <RootLayoutNav />; | ||
| } | ||
|
|
||
| function RootLayoutNav() { | ||
| const webHeaderShown = !useWebContext()?.page; | ||
| const [isRTL, setIsRTL] = useState(I18nManager.isRTL); | ||
| const { inDoc } = useInDoc(); | ||
|
|
||
| useEffect(() => { | ||
| if (IS_WEB && inDoc) { | ||
| window.addEventListener("load", () => { | ||
| const carouselComponent = document.getElementById("carousel-component"); | ||
| if (carouselComponent) { | ||
| window.parent.postMessage( | ||
| { | ||
| type: "carouselHeight", | ||
| height: carouselComponent.offsetHeight, | ||
| }, | ||
| "*", | ||
| ); | ||
| } | ||
| }); | ||
| } | ||
| }, [inDoc]); | ||
|
|
||
| return ( | ||
| <TamaguiProvider | ||
| config={tamaguiConfig} | ||
| defaultTheme={inDoc ? "dark" : "light"} | ||
| > | ||
| <View style={{ flex: 1 }}> | ||
| <GestureHandlerRootView style={{ flex: 1 }}> | ||
| <ThemeProvider value={DefaultTheme}> | ||
| <CaptureProvider> | ||
| <Stack | ||
| initialRouteName="/" | ||
| screenOptions={{ | ||
| headerShown: !inDoc && webHeaderShown, | ||
| contentStyle: { | ||
| flex: 1, | ||
| backgroundColor: inDoc | ||
| ? tamaguiConfig.themes.dark.background.val | ||
| : tamaguiConfig.themes.light.background.val, | ||
| }, | ||
| headerRight: ({ tintColor }) => ( | ||
| <HeaderRight | ||
| tintColor={tintColor} | ||
| isRTL={isRTL} | ||
| setIsRTL={setIsRTL} | ||
| /> | ||
| ), | ||
| }} | ||
| > | ||
| <Stack.Screen name="index" /> | ||
| {routes | ||
| .flatMap((item) => | ||
| item.demos.map((demo) => ({ ...demo, kind: item.kind })), | ||
| ) | ||
| .map((item) => ( | ||
| <Stack.Screen | ||
| key={item.name} | ||
| name={`demos/${item.kind}/${item.name}/index`} | ||
| options={{ | ||
| title: item.title, | ||
| }} | ||
| /> | ||
| ))} | ||
| </Stack> | ||
| </CaptureProvider> | ||
| </ThemeProvider> | ||
| </GestureHandlerRootView> | ||
| </View> | ||
| </TamaguiProvider> | ||
| ); | ||
| } |
Oops, something went wrong.