From 211c0600e404cd411c4dc76a2cc15ee4ed2b84bb Mon Sep 17 00:00:00 2001 From: YuGilJong <101111364+XionWCFM@users.noreply.github.com> Date: Thu, 14 Nov 2024 04:07:57 +0900 Subject: [PATCH] fix: React Native Playground Configuration (#1352) # Overview Configure an environment to run React Native Playground. ## Guide 1. install dependencies ``` pnpm i ``` 2. run project ``` cd examples/react-native-playground pnpm run start i ``` 3. The following screen will be displayed: Screenshot 2024-11-13 at 18 08 25 Screenshot 2024-11-13 at 18 12 07 ## Test built the entire project and confirmed that it was built without a problem. ## Trouble Shooting React Native is sensitive to cache and nodemodule state. If it doesn't work well, delete the entire nodemodules and cache folders in the project and try again. ## ETC I realized that public-hoist-pattern[]=* is not the same as node-linker=hoisted, but rather the same as setting shamefully-hoist to true. I set node-linker=hoisted in another project and experienced next15's build failing during the CI process. By default, pnpm manages dependencies strictly so that only specified dependencies are used. However, if you set this setting, you will give up strict dependency management and manage dependencies similar to the method of older generation package managers such as yarn and npm. Should we give up the functionality of pnpm? I wish there was another way to solve this problem. I think I can use it until I find another way. shamefully-hoist and public-hoist-pattern[]=* --------- Co-authored-by: Jonghyeon Ko --- .npmrc | 1 + .../.expo-shared/assets.json | 4 - examples/react-native-playground/.gitignore | 6 + examples/react-native-playground/App.tsx | 28 - examples/react-native-playground/README.md | 3 - examples/react-native-playground/app.json | 27 +- .../react-native-playground/app/+html.tsx | 40 + .../app/+not-found.tsx | 35 + .../react-native-playground/app/_layout.tsx | 14 + .../react-native-playground/app/index.tsx | 5 + .../assets/{ => images}/adaptive-icon.png | Bin .../assets/{ => images}/favicon.png | Bin .../assets/{ => images}/icon.png | Bin .../assets/{ => images}/splash.png | Bin .../react-native-playground/babel.config.js | 23 +- .../react-native-playground/eslint.config.mjs | 15 - examples/react-native-playground/index.js | 9 +- .../react-native-playground/metro.config.js | 35 +- examples/react-native-playground/package.json | 46 +- .../react-native-playground/src/providers.tsx | 42 + .../react-native-playground/tsconfig.json | 14 +- .../tsconfig.tsbuildinfo | 1 + pnpm-lock.yaml | 10656 +++++++--------- pnpm-workspace.yaml | 59 +- 24 files changed, 4902 insertions(+), 6161 deletions(-) delete mode 100644 examples/react-native-playground/.expo-shared/assets.json create mode 100644 examples/react-native-playground/.gitignore delete mode 100644 examples/react-native-playground/App.tsx delete mode 100644 examples/react-native-playground/README.md create mode 100644 examples/react-native-playground/app/+html.tsx create mode 100644 examples/react-native-playground/app/+not-found.tsx create mode 100644 examples/react-native-playground/app/_layout.tsx create mode 100644 examples/react-native-playground/app/index.tsx rename examples/react-native-playground/assets/{ => images}/adaptive-icon.png (100%) rename examples/react-native-playground/assets/{ => images}/favicon.png (100%) rename examples/react-native-playground/assets/{ => images}/icon.png (100%) rename examples/react-native-playground/assets/{ => images}/splash.png (100%) delete mode 100644 examples/react-native-playground/eslint.config.mjs create mode 100644 examples/react-native-playground/src/providers.tsx create mode 100644 examples/vite-react-18-suspense-prerender-siblings-problem/tsconfig.tsbuildinfo diff --git a/.npmrc b/.npmrc index 2eb073230..d186087a2 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,2 @@ prefer-workspace-packages=true +public-hoist-pattern[]=* diff --git a/examples/react-native-playground/.expo-shared/assets.json b/examples/react-native-playground/.expo-shared/assets.json deleted file mode 100644 index 1e6decfbb..000000000 --- a/examples/react-native-playground/.expo-shared/assets.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, - "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true -} diff --git a/examples/react-native-playground/.gitignore b/examples/react-native-playground/.gitignore new file mode 100644 index 000000000..9a71cbbf8 --- /dev/null +++ b/examples/react-native-playground/.gitignore @@ -0,0 +1,6 @@ + +# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb +# The following patterns were generated by expo-cli + +expo-env.d.ts +# @end expo-cli diff --git a/examples/react-native-playground/App.tsx b/examples/react-native-playground/App.tsx deleted file mode 100644 index cf6da639c..000000000 --- a/examples/react-native-playground/App.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { StyleSheet, Text, View } from 'react-native' -import { StatusBar } from 'expo-status-bar' -import { TestText } from '@suspensive/react-native' - -export default function Native() { - return ( - - - Suspensive - - - - ) -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', - }, - header: { - fontWeight: 'bold', - marginBottom: 20, - fontSize: 36, - }, -}) diff --git a/examples/react-native-playground/README.md b/examples/react-native-playground/README.md deleted file mode 100644 index be1fea035..000000000 --- a/examples/react-native-playground/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Native - -A [react-native](https://reactnative.dev/) app built using [expo](https://docs.expo.dev/) diff --git a/examples/react-native-playground/app.json b/examples/react-native-playground/app.json index 2799c4aff..0f667132f 100644 --- a/examples/react-native-playground/app.json +++ b/examples/react-native-playground/app.json @@ -1,31 +1,34 @@ { "expo": { - "name": "react-native-playground", - "slug": "react-native-playground", + "name": "rn", + "slug": "rn", "version": "1.0.0", "orientation": "portrait", - "icon": "./assets/icon.png", - "userInterfaceStyle": "light", + "icon": "./assets/images/icon.png", + "scheme": "myapp", + "userInterfaceStyle": "automatic", "splash": { - "image": "./assets/splash.png", + "image": "./assets/images/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, - "updates": { - "fallbackToCacheTimeout": 0 - }, - "assetBundlePatterns": ["**/*"], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { - "foregroundImage": "./assets/adaptive-icon.png", - "backgroundColor": "#FFFFFF" + "foregroundImage": "./assets/images/adaptive-icon.png", + "backgroundColor": "#ffffff" } }, "web": { - "favicon": "./assets/favicon.png" + "bundler": "metro", + "output": "static", + "favicon": "./assets/images/favicon.png" + }, + "plugins": ["expo-router", "expo-font"], + "experiments": { + "typedRoutes": true } } } diff --git a/examples/react-native-playground/app/+html.tsx b/examples/react-native-playground/app/+html.tsx new file mode 100644 index 000000000..776700d69 --- /dev/null +++ b/examples/react-native-playground/app/+html.tsx @@ -0,0 +1,40 @@ +import { ScrollViewStyleReset } from 'expo-router/html' + +// 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 ( + + + + + + + {/* + 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. */} + + {/* biome-ignore lint/security/noDangerouslySetInnerHtml: */} +