fix(react-native-playground): update deps (#1355)

examples/react-native-playground/app/+html.tsx

@@ -12,7 +12,7 @@ export default function Root({ children }: { children: React.ReactNode }) {
         <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.
         */}

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

@@ -1,6 +1,6 @@
+import { Slot } from 'expo-router'
 import * as SplashScreen from 'expo-splash-screen'
 import 'react-native-reanimated'
-import { Slot } from 'expo-router'
 import { Providers } from '@/src/providers'
 
 SplashScreen.preventAutoHideAsync()

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

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

examples/react-native-playground/babel.config.js

@@ -1,4 +1,5 @@
 module.exports = (api) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
   api.cache(true)
   return {
     presets: [['babel-preset-expo']],

examples/react-native-playground/eslint.config.mjs

@@ -0,0 +1,15 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { suspensiveReactTypeScriptConfig } from '@suspensive/eslint-config'
+
+export default [
+  ...suspensiveReactTypeScriptConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: path.dirname(fileURLToPath(import.meta.url)),
+        project: './tsconfig.json',
+      },
+    },
+  },
+]

examples/react-native-playground/index.js

@@ -1 +1 @@
-import "expo-router/entry";
+import 'expo-router/entry'

examples/react-native-playground/metro.config.js

@@ -1,7 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const path = require('node:path')
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const { getDefaultConfig } = require('expo/metro-config')
-const { withNativeWind } = require('nativewind/metro')
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const { FileStore } = require('metro-cache')
-const path = require('node:path')
 
 const projectRoot = __dirname
 const workspaceRoot = path.resolve(projectRoot, '../..')

examples/react-native-playground/package.json

@@ -1,52 +1,48 @@
 {
   "name": "@suspensive/react-native-playground",
-  "main": "index.js",
   "version": "0.0.0",
   "private": true,
   "author": "Jonghyeon Ko <[email protected]>",
+  "main": "index.js",
   "scripts": {
-    "start": "expo start",
     "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",
-    "web": "DARK_MODE=media expo start --web",
-    "test": "jest --watchAll"
-  },
-  "jest": {
-    "preset": "jest-expo"
+    "start": "expo start",
+    "web": "DARK_MODE=media expo start --web"
   },
   "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",
+    "@expo/html-elements": "0.11.0",
+    "@expo/vector-icons": "^14.0.4",
     "@legendapp/motion": "^2.4.0",
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^7.0.0",
+    "@suspensive/react-native": "workspace:*",
     "babel-plugin-module-resolver": "^5.0.2",
     "expo": "catalog:",
-    "expo-font": "~12.0.10",
-    "expo-linking": "~6.3.1",
+    "expo-font": "~13.0.1",
+    "expo-linking": "~7.0.2",
     "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",
+    "expo-splash-screen": "~0.29.7",
+    "expo-status-bar": "catalog:",
+    "expo-system-ui": "~4.0.2",
+    "expo-web-browser": "~14.0.0",
+    "jscodeshift": "17.1.1",
     "react": "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"
+    "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"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "catalog:react18",
-    "jest": "catalog:",
-    "jest-expo": "catalog:",
-    "typescript": "~5.3.3"
+    "@types/react": "catalog:react18"
+  },
+  "jest": {
+    "preset": "jest-expo"
   }
 }

examples/react-native-playground/src/providers.tsx

@@ -1,12 +1,12 @@
-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'
+import { type PropsWithChildren, useEffect } from 'react'
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'
 
 export const Providers = ({ children }: PropsWithChildren) => {
   return (

examples/react-native-playground/tsconfig.json

@@ -11,5 +11,9 @@
     "**/*.tsx",
     ".expo/types/**/*.ts",
     "expo-env.d.ts",
+    "babel.config.js",
+    "eslint.config.mjs",
+    "index.js",
+    "metro.config.js"
   ]
 }

packages/codemods/package.json

@@ -17,6 +17,7 @@
   "author": "Gwansik Kim <[email protected]>",
   "sideEffects": false,
   "type": "module",
+  "bin": "dist/bin/codemods.cjs",
   "files": [
     "dist"
   ],
@@ -31,7 +32,6 @@
     "prepack": "pnpm build",
     "test:ui": "vitest --ui --coverage --typecheck"
   },
-  "bin": "dist/bin/codemods.cjs",
   "dependencies": {
     "@commander-js/extra-typings": "^12.1.0",
     "commander": "^12.1.0",

packages/react-native/package.json

@@ -65,7 +65,7 @@
   },
   "peerDependencies": {
     "react": "^18",
-    "react-native": "0.74.3"
+    "react-native": "^0.76.1"
   },
   "publishConfig": {
     "access": "public"