fix(template): update to React Native 0.75 and improve Bun compatibility

release-npm

Author: tobua

README.md

@@ -12,7 +12,7 @@ Starting point for creating React Native plugins in TypeScript without native co
 ## Usage
 
 ```
-bun create react-native-plugin react-native-my-plugin
+bun --bun create react-native-plugin react-native-my-plugin
 npm init -y react-native-plugin@latest react-native-my-plugin / npx create-react-native-plugin@latest react-native-my-plugin
 ```
 

index.js

@@ -66,4 +66,4 @@ console.log(`😃 Created new plugin called ${name.regular} in ${destinationDire
 console.log('🛠️  Start coding in the file ./index.tsx.')
 console.log('🛠️  To preview the plugin edit app/App.tsx and create a RN installation with:')
 console.log(`🐚 cd ${name.regular}`)
-console.log('🐚 npm run app')
+console.log('🐚 npm run app / bun app:bun')

package.json

@@ -12,8 +12,8 @@
     "change-case": "^5.4.4"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.8.1",
-    "zero-configuration": "^0.12.0"
+    "@biomejs/biome": "^1.8.3",
+    "zero-configuration": "^0.17.2"
   },
   "trustedDependencies": [
     "zero-configuration"

template/create-app.js

@@ -1,14 +1,16 @@
-import { copyFileSync, renameSync, rmSync } from 'fs'
-import { join } from 'path'
 import { execSync } from 'child_process'
+import { copyFileSync, cpSync, readFileSync, renameSync, rmSync } from 'fs'
+import { join, resolve } from 'path'
+import Arborist from '@npmcli/arborist'
+import packlist from 'npm-packlist'
 
 // This script enhances source files inside /app with a fresh React Native template.
 const appName = '<%= pascal %>App'
 const isBun = typeof Bun !== 'undefined'
 
 console.log('⌛ Initializing a fresh RN project...')
 
-execSync(`${isBun ? 'bunx' : 'npx'} react-native init ${appName} --skip-git-init true --install-pods true`, {
+execSync(`${isBun ? 'bunx' : 'npx'} @react-native-community/cli init ${appName} --skip-git-init true --install-pods true`, {
   // Write output to cnosole.
   stdio: 'inherit',
 })
@@ -24,17 +26,24 @@ execSync(`${isBun ? 'bun' : 'npm'} run build`, {
   stdio: 'inherit',
 })
 
-// Install this package locally, avoiding symlinks.
-execSync('npm install $(npm pack .. | tail -1)', {
-  cwd: join(process.cwd(), 'app'),
-  stdio: 'inherit',
-})
+const packageName = JSON.parse(readFileSync('./package.json')).name
+const packageDirectory = resolve(`app/node_modules/${packageName}`)
+
+// Package files and copy them to app node_modules.
+// Couldn't get symlinks to work with metro.
+const arborist = new Arborist({ path: process.cwd() })
+const tree = await arborist.loadActual()
+const files = await packlist(tree)
+
+mkdirSync(packageDirectory, { recursive: true })
+
+files.forEach((file) => cpSync(join(process.cwd(), file), join(packageDirectory, file), { recursive: true }))
 
 console.log('')
 console.log('🍞 React Native App created inside /app.')
 console.log('🛠️  To run the example with the plugin included:')
 console.log('🐚 cd app')
-console.log('🐚 npm run ios / npm run android')
+console.log('🐚 npm run ios / npm run android | bun ios / bun android')
 console.log('🌪️  To copy over the changes from the plugin source run:')
-console.log('🐚 npm run watch')
+console.log('🐚 npm run watch | bun watch')
 console.log('🛠️  This will copy changes over to the app.')

template/package.json

@@ -4,6 +4,7 @@
   "license": "MIT",
   "scripts": {
     "app": "node create-app.js",
+    "app:bun": "bun create-app.js",
     "app:install": "npm i --no-save $(npm pack . | tail -1) --prefix app",
     "build": "esbuild index.tsx --outdir=dist --bundle --format=esm --sourcemap --external:react-native --external:react",
     "watch": "npm-run-all --parallel build:watch copy",
@@ -16,27 +17,30 @@
     "format": "prettier \"{,!(app|dist)/**/}*.{ts,tsx}\" --write"
   },
   "devDependencies": {
-    "@react-native/babel-preset": "^0.74.84",
-    "@react-native/eslint-config": "^0.74.84",
-    "@react-native/typescript-config": "^0.74.84",
+    "@npmcli/arborist": "^7.5.4",
+    "@react-native-community/cli": "^14.0.0",
+    "@react-native/babel-preset": "^0.75.1",
+    "@react-native/eslint-config": "^0.75.1",
+    "@react-native/typescript-config": "^0.75.1",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.2",
+    "@types/node": "^22.4.0",
     "@types/react": "^18.3.3",
     "@types/react-native": "^0.73.0",
     "@types/react-test-renderer": "^18.3.0",
     "babel-jest": "^29.7.0",
     "cpx": "^1.5.0",
-    "esbuild": "^0.21.5",
+    "esbuild": "^0.23.1",
     "eslint": "8.57.0",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
     "jest": "^29.7.0",
+    "npm-packlist": "^8.0.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
-    "react-native": "^0.74.2",
+    "react-native": "^0.75.1",
     "react-test-renderer": "^18.3.1",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": ">= 18",