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: <img width="357" alt="Screenshot 2024-11-13 at 18 08 25" src="https://github.com/user-attachments/assets/a71a59c1-980a-46f2-898c-764c277960c2"> <img width="1256" alt="Screenshot 2024-11-13 at 18 12 07" src="https://github.com/user-attachments/assets/59828f3a-fa87-4f24-b55d-0855771217c4"> ## 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 <[email protected]>
toss · Nov 13, 2024 · 211c060 · 211c060
1 parent ed96eea
commit 211c060
Show file tree

Hide file tree

Showing 24 changed files with 4,902 additions and 6,161 deletions.
diff --git 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
diff --git a/examples/react-native-playground/.gitignore 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
diff --git a/examples/react-native-playground/README.md b/examples/react-native-playground/README.md
diff --git 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
@@ -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 (
+    <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" />
+
+        {/* 
+          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. */}
+
+        {/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`
diff --git a/examples/react-native-playground/app/+not-found.tsx b/examples/react-native-playground/app/+not-found.tsx
@@ -0,0 +1,35 @@
+import { Stack } from 'expo-router'
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View style={styles.container}>
+        <Text style={styles.title}>This screen doesn't exist.</Text>
+      </View>
+    </>
+  )
+}
+
+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',
+  },
+})
diff --git a/examples/react-native-playground/app/_layout.tsx b/examples/react-native-playground/app/_layout.tsx
@@ -0,0 +1,14 @@
+import * as SplashScreen from 'expo-splash-screen'
+import 'react-native-reanimated'
+import { Slot } from 'expo-router'
+import { Providers } from '@/src/providers'
+
+SplashScreen.preventAutoHideAsync()
+
+export default function RootLayout() {
+  return (
+    <Providers>
+      <Slot />
+    </Providers>
+  )
+}
diff --git a/examples/react-native-playground/app/index.tsx b/examples/react-native-playground/app/index.tsx
@@ -0,0 +1,5 @@
+import { Text } from 'react-native'
+
+export default function Page() {
+  return <Text>@suspensive/react-native-playground</Text>
+}
diff --git a/...ative-playground/assets/adaptive-icon.png → ...layground/assets/images/adaptive-icon.png b/...ative-playground/assets/adaptive-icon.png → ...layground/assets/images/adaptive-icon.png
diff --git a/...eact-native-playground/assets/favicon.png → ...tive-playground/assets/images/favicon.png b/...eact-native-playground/assets/favicon.png → ...tive-playground/assets/images/favicon.png
diff --git a/...s/react-native-playground/assets/icon.png → ...-native-playground/assets/images/icon.png b/...s/react-native-playground/assets/icon.png → ...-native-playground/assets/images/icon.png
diff --git a/...react-native-playground/assets/splash.png → ...ative-playground/assets/images/splash.png b/...react-native-playground/assets/splash.png → ...ative-playground/assets/images/splash.png
diff --git a/examples/react-native-playground/babel.config.js b/examples/react-native-playground/babel.config.js
@@ -1,6 +1,19 @@
-module.exports = function (api) {
-  api.cache(true);
+module.exports = (api) => {
+  api.cache(true)
   return {
-    presets: ["babel-preset-expo"],
-  };
-};
+    presets: [['babel-preset-expo']],
+
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['./'],
+
+          alias: {
+            '@': './',
+          },
+        },
+      ],
+    ],
+  }
+}
diff --git a/examples/react-native-playground/eslint.config.mjs b/examples/react-native-playground/eslint.config.mjs
diff --git a/examples/react-native-playground/index.js b/examples/react-native-playground/index.js
@@ -1,8 +1 @@
-import { registerRootComponent } from "expo";
-
-import App from "./App";
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in Expo Go or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);
+import "expo-router/entry";
diff --git a/examples/react-native-playground/metro.config.js b/examples/react-native-playground/metro.config.js
@@ -1,21 +1,24 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require("expo/metro-config");
-const path = require("path");
+const { getDefaultConfig } = require('expo/metro-config')
+const { withNativeWind } = require('nativewind/metro')
+const { FileStore } = require('metro-cache')
+const path = require('node:path')
 
-// Find the workspace root, this can be replaced with `find-yarn-workspace-root`
-const workspaceRoot = path.resolve(__dirname, "../..");
-const projectRoot = __dirname;
+const projectRoot = __dirname
+const workspaceRoot = path.resolve(projectRoot, '../..')
 
-const config = getDefaultConfig(projectRoot);
+const config = getDefaultConfig(projectRoot)
 
-// 1. Watch all files within the monorepo
-config.watchFolders = [workspaceRoot];
-// 2. Let Metro know where to resolve packages, and in what order
+config.watchFolders = [workspaceRoot]
+config.resolver.disableHierarchicalLookup = true
 config.resolver.nodeModulesPaths = [
-  path.resolve(projectRoot, "node_modules"),
-  path.resolve(workspaceRoot, "node_modules"),
-];
-// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
-config.resolver.disableHierarchicalLookup = true;
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(workspaceRoot, 'node_modules'),
+]
 
-module.exports = config;
+config.cacheStores = [
+  new FileStore({
+    root: path.join(projectRoot, 'node_modules', '.cache', 'metro'),
+  }),
+]
+
+module.exports = config
diff --git a/examples/react-native-playground/package.json b/examples/react-native-playground/package.json
@@ -1,24 +1,52 @@
 {
   "name": "@suspensive/react-native-playground",
+  "main": "index.js",
   "version": "0.0.0",
   "private": true,
   "author": "Jonghyeon Ko <[email protected]>",
-  "main": "index.js",
   "scripts": {
-    "android": "expo start --android",
-    "eject": "expo eject",
-    "ios": "expo start --ios"
+    "start": "expo start",
+    "android": "DARK_MODE=media expo start --android",
+    "ios": "DARK_MODE=media expo start --ios",
+    "web": "DARK_MODE=media expo start --web",
+    "test": "jest --watchAll"
+  },
+  "jest": {
+    "preset": "jest-expo"
   },
   "dependencies": {
     "@suspensive/react-native": "workspace:*",
+    "@expo-google-fonts/noto-sans-kr": "^0.2.3",
+    "@expo/html-elements": "0.4.2",
+    "@expo/vector-icons": "^14.0.2",
+    "@legendapp/motion": "^2.4.0",
+    "@react-navigation/native": "^6.0.2",
+    "babel-plugin-module-resolver": "^5.0.2",
     "expo": "catalog:",
-    "expo-status-bar": "catalog:",
+    "expo-font": "~12.0.10",
+    "expo-linking": "~6.3.1",
+    "expo-router": "catalog:",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "~3.0.7",
+    "expo-web-browser": "~13.0.3",
+    "jscodeshift": "0.15.2",
+    "prettier": "^3.3.3",
     "react": "catalog:react18",
-    "react-native": "catalog:react18"
+    "react-native": "catalog:react18",
+    "react-dom": "catalog:react18",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "13.4.0",
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@expo/webpack-config": "catalog:",
-    "@types/react": "catalog:react18"
+    "@babel/core": "^7.20.0",
+    "@types/react": "catalog:react18",
+    "jest": "catalog:",
+    "jest-expo": "catalog:",
+    "typescript": "~5.3.3"
   }
 }
diff --git a/examples/react-native-playground/src/providers.tsx b/examples/react-native-playground/src/providers.tsx
@@ -0,0 +1,42 @@
+import { PropsWithChildren, useEffect } from 'react'
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'
+import {
+  NotoSansKR_300Light,
+  NotoSansKR_500Medium,
+  NotoSansKR_700Bold,
+  useFonts,
+} from '@expo-google-fonts/noto-sans-kr'
+import * as SplashScreen from 'expo-splash-screen'
+
+export const Providers = ({ children }: PropsWithChildren) => {
+  return (
+    <FontProvider>
+      <SafeAreaProvider>
+        <SafeAreaView style={{ flex: 1 }}>{children}</SafeAreaView>
+      </SafeAreaProvider>
+    </FontProvider>
+  )
+}
+
+const FontProvider = ({ children }: PropsWithChildren) => {
+  const [loaded, error] = useFonts({
+    NotoSansKR_300Light,
+    NotoSansKR_500Medium,
+    NotoSansKR_700Bold,
+  })
+
+  useEffect(() => {
+    if (error) throw error
+  }, [error])
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync()
+    }
+  }, [loaded])
+
+  if (!loaded) {
+    return null
+  }
+  return children
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		prefer-workspace-packages=true
		public-hoist-pattern[]=*