🔰

React Nativeでプロジェクト新規作成

に公開
React Native
npx
tech

React Nativeの勉強を開始しました。某サイトを参考に進めていましたが（１年以内の記事）、その記事に反してreact-native-cliは非推奨ということが判明。下記のようにnpx react-nativeを使用します。
Zennなどで最新情報に当たるのが良いですね。

プロジェクト新規作成

FizzBuzzという名前のプロジェクトを作る場合のコマンドを記載しています。参考にされる方はプロジェクト名を各々読み替えてください。

npx react-native init FizzBuzz

エラーです。

% npx react-native init FizzBuzz
This will walk you through creating a new React Native project in /Users/yourname/MyReactNative/FizzBuzz
Installing react-native...
Consider installing yarn to make this faster: https://yarnpkg.com
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

added 312 packages, and audited 313 packages in 9s

20 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
/opt/homebrew/lib/node_modules/react-native-cli/index.js:302
  cli.init(root, projectName);
      ^

TypeError: cli.init is not a function
    at run (/opt/homebrew/lib/node_modules/react-native-cli/index.js:302:7)
    at createProject (/opt/homebrew/lib/node_modules/react-native-cli/index.js:249:3)
    at init (/opt/homebrew/lib/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/opt/homebrew/lib/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)

Node.js v22.14.0

React Native CLIと関連パッケージとの競合が問題となっているそうです。react-native-cliパッケージをアンインストールします。

npm uninstall -g react-native
npm uninstall -g react-native-cli

ようやくプロジェクト新規作成ができそうです。

npx react-native init FizzBuzz

もしくはモバイル開発初心者の場合は下記も推奨とのこと。

npx create-expo-app FizzBuzz

こちらを参考にしました

npx create-expo-app FizzBuzz
Need to install the following packages:
create-expo-app@3.3.0
Ok to proceed? (y) 

Creating an Expo project using the default template.

To choose from all available templates pass in the --template arg:
  $ npx create-expo-app --template

To choose from all available examples pass in the --example arg:
  $ npx create-expo-app --example

✔ Downloaded and extracted project files.
> npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated sudo-prompt@9.1.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated @xmldom/xmldom@0.7.13: this version is no longer supported, please update to at least 0.8.*
npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported

added 1119 packages, and audited 1120 packages in 53s

94 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd FizzBuzz
- npm run android
- npm run ios
- npm run web

Discussion