fix(template): upgrade plugin to React Native 0.73

release-npm

.github/workflows/push.yml

@@ -12,11 +12,10 @@ jobs:
       contents: write
     steps:
       - uses: actions/checkout@v3
-      - run: npm install --legacy-peer-deps
+      - run: npm install
       - run: npm run build
       - name: Test 📱
         run: npm test
-      - run: npm install -g npm@latest
-      - uses: tobua/release-npm-action@v2
+      - uses: tobua/release-npm-action@v3
         with:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

app/App.tsx

@@ -31,7 +31,7 @@ Object.entries(Screens).map(([name, configuration]) =>
   register(configuration.component, name, {
     transition: configuration.transition,
     background: configuration.background,
-  }),
+  })
 )
 
 export default () => (

babel.config.json

@@ -1,3 +1,3 @@
 {
-  "presets": ["module:metro-react-native-babel-preset"]
+  "presets": ["module:@react-native/babel-preset"]
 }

create-app.js

@@ -8,7 +8,7 @@ const appName = 'ReactigationApp'
 
 console.log('⌛ Initializing a fresh RN project...')
 
-execSync(`npx react-native init ${appName}`, {
+execSync(`npx react-native init ${appName} --skip-git-init true --install-pods true`, {
   // Write output to cnosole.
   stdio: 'inherit',
 })
@@ -21,6 +21,11 @@ rmSync('app', { recursive: true })
 
 renameSync(appName, 'app')
 
+// Run build to ensure distributed files for plugin exist.
+execSync('npm run build', {
+  stdio: 'inherit',
+})
+
 // Install this package locally, avoiding symlinks.
 execSync('npm install $(npm pack .. | tail -1) --legacy-peer-deps', {
   cwd: join(process.cwd(), 'app'),

index.tsx

@@ -83,7 +83,7 @@ export const initial = (name: string) => {
 
   if (history.length === 0) {
     return console.error(
-      `Reactigation: Trying to set initial screen before any screens have been registered.`,
+      'Reactigation: Trying to set initial screen before any screens have been registered.',
     )
   }
 

package.json

@@ -18,7 +18,7 @@
   "scripts": {
     "app": "node create-app.js",
     "app:install": "npm i --no-save $(npm pack . | tail -1)  --prefix app",
-    "build": "esbuild index.tsx --outdir=dist --bundle --minify --format=esm --platform=neutral --sourcemap --external:react-native --external:react && tsc",
+    "build": "esbuild index.tsx --outdir=dist --bundle --format=esm --platform=neutral --sourcemap --external:react-native --external:react && tsc",
     "watch": "npm-run-all --parallel build:watch copy",
     "copy": "cpx 'dist/**/*' app/node_modules/reactigation/dist --watch",
     "build:watch": "esbuild index.tsx --watch --outdir=dist --bundle --format=esm --platform=neutral --sourcemap --external:react-native --external:react",
@@ -32,26 +32,28 @@
     "react-native": ">= 0.70"
   },
   "devDependencies": {
-    "@react-native/eslint-config": "^0.73.1",
-    "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.23",
-    "@types/react-native": "^0.72.3",
-    "@types/react-test-renderer": "^18.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@react-native-community/cli": "^13.0.0",
+    "@react-native/babel-preset": "^0.74.0",
+    "@react-native/eslint-config": "^0.74.0",
+    "@react-native/typescript-config": "^0.74.0",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.43",
+    "@types/react-native": "^0.72.8",
+    "@types/react-test-renderer": "^18.0.7",
     "babel-jest": "^29.7.0",
     "cpx": "^1.5.0",
-    "esbuild": "^0.19.4",
-    "eslint": "^8.50.0",
+    "esbuild": "^0.19.9",
+    "eslint": "^8.55.0",
     "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
-    "metro-react-native-babel-preset": "^0.77.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.1",
     "react": "^18.2.0",
-    "react-native": "^0.72.5",
+    "react-native": "^0.73.0",
     "react-test-renderer": "^18.2.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "files": [
     "dist"
@@ -70,10 +72,6 @@
     "ignorePatterns": [
       "dist",
       "app"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "plugins": [
-      "@typescript-eslint"
     ]
   },
   "prettier": {

test/utils/render-to-tree.ts

@@ -2,7 +2,7 @@
 import renderer, { ReactTestRenderer, act } from 'react-test-renderer'
 
 export default (Navigation: JSX.Element) => {
-  let rendered: ReactTestRenderer = null
+  let rendered: ReactTestRenderer | null = null
   // act to ensure effects are flushed in initial render.
   act(() => {
     rendered = renderer.create(Navigation)
@@ -22,7 +22,7 @@ export default (Navigation: JSX.Element) => {
   expect(screensRoot.children.length > 0).toEqual(true)
 
   return {
-    root: rendered.root,
+    root: (rendered as unknown as ReactTestRenderer).root,
     tree,
     wrapper: screensRoot,
     wrappers: screensRoot.children,

tsconfig.json

@@ -1,24 +1,14 @@
 {
+  "extends": "@react-native/typescript-config/tsconfig.json",
   "compilerOptions": {
-    "target": "esnext",
-    "module": "commonjs",
-    "lib": ["es2017"],
-    "allowJs": true,
-    "jsx": "react-native",
-    "isolatedModules": true,
-    "strict": true,
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "declaration": true,
     "outDir": "dist",
+    "noEmit": false,
+    "declaration": true,
     "emitDeclarationOnly": true,
+    "types": ["react-native", "jest", "node"],
     "paths": {
       "reactigation": ["."]
     }
   },
-  "include": ["index.tsx"],
-  "exclude": ["node_modules"]
+  "include": ["index.tsx"]
 }

types.ts

@@ -1,4 +1,4 @@
-import { Animated } from 'react-native'
+import type { Animated } from 'react-native'
 
 export type AnimationHandler = (
   state: State,