feat(react-native-playground): remove shamefully-hoist and expo 52 ve…

…rsion upgrade (#1356)

# Overview

With the addition of support for pnpm monorepo in expo 52, you can now
disable "shamefully hoist" and "node-linker=hoisted".

[expo sdk 52 release](https://expo.dev/changelog/2024/11-12-sdk-52)

Accordingly, we upgrade the existing react-native-playground's expo
version to 52 and remove "public-hoist-pattern[]=*".

As a result of testing, if you use the monorepo pattern without
hoisting, it works fine locally, but causes problems in EAS remote
builds.

However, Playground is not expected to require EAS remote build. 

I guess the benefits of not using the hoisting pattern are greater.

## Test

I confirmed that the IOS Simulator operates locally and that the entire
build process operates.

## Trouble Shooting

During the migration process, I often failed to start the expo app due
to the cache of metro or packagemanager.

Most problems are caused by mismatched ReactNative versions.

If you are having this problem try


```
pnpm store prune
pnpm i
```

[pnpm store prune docs](https://pnpm.io/next/cli/store#prune)


## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: Jonghyeon Ko <manudeli.ko@gmail.com>

.npmrc

@@ -1,2 +1 @@
 prefer-workspace-packages=true
-public-hoist-pattern[]=*

examples/react-native-playground/.gitignore

@@ -1,6 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 
-# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
-# The following patterns were generated by expo-cli
+# dependencies
+node_modules/
 
+# Expo
+.expo/
+dist/
+web-build/
 expo-env.d.ts
-# @end expo-cli
+
+# 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
+
+app-example

examples/react-native-playground/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

examples/react-native-playground/app.json

@@ -1,17 +1,13 @@
 {
   "expo": {
-    "name": "rn",
-    "slug": "rn",
+    "name": "@suspensive/react-native-playground",
+    "slug": "@suspensive/react-native-playground",
     "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"
-    },
+    "newArchEnabled": true,
     "ios": {
       "supportsTablet": true
     },
@@ -26,7 +22,18 @@
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router", "expo-font"],
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ]
+    ],
     "experiments": {
       "typedRoutes": true
     }

examples/react-native-playground/app/+not-found.tsx

@@ -1,35 +1,10 @@
 import { Stack } from 'expo-router'
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { Fragment } from 'react'
 
 export default function NotFoundScreen() {
   return (
-    <>
+    <Fragment>
       <Stack.Screen options={{ title: 'Oops!' }} />
-      <View style={styles.container}>
-        <Text style={styles.title}>This screen doesn't exist.</Text>
-      </View>
-    </>
+    </Fragment>
   )
 }
-
-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',
-  },
-})

examples/react-native-playground/app/_layout.tsx

@@ -1,13 +1,15 @@
+import { Providers } from '@/src/providers'
 import { Slot } from 'expo-router'
 import * as SplashScreen from 'expo-splash-screen'
+import { StatusBar } from 'expo-status-bar'
 import 'react-native-reanimated'
-import { Providers } from '@/src/providers'
 
 SplashScreen.preventAutoHideAsync()
 
 export default function RootLayout() {
   return (
     <Providers>
+      <StatusBar style="auto" />
       <Slot />
     </Providers>
   )

examples/react-native-playground/app/index.tsx

@@ -1,11 +1,12 @@
 import { TestText } from '@suspensive/react-native'
+import { Fragment } from 'react'
 import { Text } from 'react-native'
 
 export default function Page() {
   return (
-    <>
+    <Fragment>
       <TestText />
       <Text>Suspensive</Text>
-    </>
+    </Fragment>
   )
 }

examples/react-native-playground/package.json

@@ -1,48 +1,56 @@
 {
   "name": "@suspensive/react-native-playground",
-  "version": "0.0.0",
-  "private": true,
   "author": "Jonghyeon Ko <jonghyeon@toss.im>",
-  "main": "index.js",
+  "version": "0.0.0",
+  "main": "expo-router/entry",
   "scripts": {
-    "android": "DARK_MODE=media expo start --android",
-    "ci:eslint": "eslint \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}\"",
-    "ci:type": "tsc --noEmit",
-    "ios": "DARK_MODE=media expo start --ios",
     "start": "expo start",
-    "web": "DARK_MODE=media expo start --web"
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint"
+  },
+  "jest": {
+    "preset": "jest-expo"
   },
   "dependencies": {
-    "@expo-google-fonts/noto-sans-kr": "^0.2.3",
-    "@expo/html-elements": "0.11.0",
-    "@expo/vector-icons": "^14.0.4",
-    "@legendapp/motion": "^2.4.0",
-    "@react-navigation/native": "^7.0.0",
     "@suspensive/react-native": "workspace:*",
-    "babel-plugin-module-resolver": "^5.0.2",
+    "@expo/vector-icons": "^14.0.2",
+    "@react-navigation/bottom-tabs": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
     "expo": "catalog:",
+    "expo-blur": "~14.0.1",
+    "expo-constants": "~17.0.3",
     "expo-font": "~13.0.1",
+    "expo-haptics": "~14.0.0",
     "expo-linking": "~7.0.2",
     "expo-router": "catalog:",
-    "expo-splash-screen": "~0.29.7",
+    "expo-splash-screen": "~0.29.9",
     "expo-status-bar": "catalog:",
+    "expo-symbols": "~0.2.0",
     "expo-system-ui": "~4.0.2",
-    "expo-web-browser": "~14.0.0",
-    "jscodeshift": "17.1.1",
+    "expo-web-browser": "~14.0.1",
     "react": "catalog:react18",
+    "react-dom": "catalog:react18",
     "react-native": "catalog:react18",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "4.0.0",
-    "react-native-svg": "15.8.0",
-    "react-native-web": "~0.19.13"
+    "react-native-screens": "~4.0.0",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "catalog:react18"
+    "@babel/core": "^7.25.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "catalog:react18",
+    "@types/react-test-renderer": "^18.3.0",
+    "jest": "catalog:",
+    "jest-expo": "catalog:",
+    "react-test-renderer": "18.3.1",
+    "typescript": "^5.3.3"
   },
-  "jest": {
-    "preset": "jest-expo"
-  }
+  "private": true
 }