React Native × Typescript のインストールをやってみた

0. Prepare Today's environment

Windows 10
Node v12.18.2
Android Studio 3.5
→Android StudioはAndroid SDKとAndroid Virtual Deviceを使用するため。

1. Install react-native-community/cli

「react-native-community/cli」はReact Native × Typescriptのテンプレートを提供してくれて便利。

$ npm install -g @react-native-community/cli
npm WARN deprecated @hapi/joi@15.1.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
C:\Users\takas\AppData\Roaming\npm\react-native -> C:\Users\takas\AppData\Roaming\npm\node_modules\@react-native-community\cli\build\bin.js

> core-js@2.6.11 postinstall C:\Users\takas\AppData\Roaming\npm\node_modules\@react-native-community\cli\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\@react-native-community\cli\node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @react-native-community/cli@4.10.1 requires a peer of react-native@^0.62.0-rc.0 but none is installed. You must install peer dependencies yourself.

+ @react-native-community/cli@4.10.1
added 614 packages from 353 contributors in 37.963s

2. Check compatible versions between react-native-community/cli & react-native-community/react-native-template-typescript

react-native-community/cliのGitHubページでReact Nativeとの互換関係を確認。
インストールされたreact-native-community/cliは4.10.1なのでreact-nativeは0.62.xが対応。

react-native-community/react-native-template-typescriptのGitHubページでReact Nativeとの互換関係を確認。
インストールされるreact-nativeは0.62.xなのでreact-native-template-typescriptは6.4.xが対応。

3. Create react-native-template-typescript project

React Native × Typescriptのテンプレートでプロジェクトを作成。
ちなみに、プロジェクト名には - (ハイフン)とか使えない文字があるので注意。

npx react-native init onlibrary_frontend --template react-native-template-typescript@6.4.4

4. Check Android SDK folder

Android Studioのインストール時に格納されたAndroid SDKのフォルダを確認。

5. Create local.properties

プロジェクト直下のandroidフォルダ配下にlocal.propertiesを作成。
Android SDKの格納先を記載。
ちなみに、local.propertiesの代わりにWindows環境変数でANDROID_SDK_ROOTを作成でもOK。

$ cat android/local.properties
sdk.dir = C:\\Users\\takas\\AppData\\Local\\Android\\Sdk

6. Launch Android Virtual Device

Android Studioのインストール時に同梱されたAndroid Virtual Deviceを作成して起動。
作成する仮想モバイルデバイスは任意。
念のため、起動前にデータを削除。

7. Check Android Virtual Device ID

起動された仮想モバイルデバイスのIDを確認。

$ adb devices
List of devices attached
emulator-5554   device

8. Run react-native-template-typescript project

React Nativeの実行はプロジェクト直下で「react-native run-android」のコマンド一発。
起動中の仮想モバイルデバイスのIDに対しての操作が標準出力に流れて表示。

takas@DESKTOP-5GP9BNU MINGW64 /c/workspace/onlibrary/onlibrary_frontend (master)
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 960 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...
info Installing the app...

> Task :app:stripDebugDebugSymbols UP-TO-DATE
Compatible side by side NDK version was not found.

> Task :app:installDebug
09:03:30 V/ddms: execute: running am get-config
09:03:30 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1
09:03:30 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'Nexus_6_API_28(AVD) - 9' for app:debug
09:03:30 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'
09:03:30 D/Device: Uploading file onto device 'emulator-5554'
09:03:30 D/ddms: Reading file permision of C:\workspace\onlibrary\onlibrary_frontend\android\app\build\outputs\apk\debug\app-debug.apk as: rwx------
09:03:32 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
09:04:09 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
09:04:09 V/ddms: execute: returning
09:04:09 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
09:04:09 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 1m 0s
27 actionable tasks: 2 executed, 25 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.onlibrary_frontend/.MainActivity }

9. Display React Native App

成功なら、デフォルト画面が表示。