React Native for macOS でサンプルアプリを動かす

# React Native for macOS

MicrosoftがReact Nativeをフォークしてパッチをあてた[React Native for Windows](https://microsoft.github.io/react-native-windows/)に加えて、 [React Native for macOS](https://github.com/microsoft/react-native-macos)をGitHubで公開しました。

[Get Started with macOS](https://microsoft.github.io/react-native-windows/docs/rnm-getting-started)の手順でスケルトンアプリと、 [rssreader](https://github.com/qmatteoq/react-native-windows-samples/tree/master/samples/rssreader)の2つを動かしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32750/a076e45d-3325-561c-2f83-35bec524f377.png)

# React Native for macOSでmacアプリを起動させる

すでにReact Nativeの開発環境が整っていれば、簡単にアプリを起動させることができます。

[Get Started with macOS](https://microsoft.github.io/react-native-windows/docs/rnm-getting-started) を読みながら進めます。

## 環境

Tools | バージョン
----|----
macOS Catalina | 10.15.4
Xcode | 11.4.1
node | 12.14.1
npx | 6.14.2
yarn | 1.21.1
pod | 1.9.1
watchman | 4.9.0

## react-native init でプロジェクトを作成

今回は `RNMacosSample` というプロジェクトで進めます。

```bash
npx react-native init RNMacosSample --version 0.61.5
```

エラーなく終了し、最後に以下の表示が出れば成功です。`RNMacosSample` ディレクトリが作成されます。

```bash
% npx react-native init RNMacosSample --version 0.61.5
This will walk you through creating a new React Native project in /Users/shoken/git/sample
Using yarn v1.22.4
Installing react-native@0.61.5...
# ----省略----
✨  Done in 9.44s.
info Installing required CocoaPods dependencies

  Run instructions for iOS:
    • cd "/Users/shoken/git/RNMacosSample" && npx react-native run-ios
    - or -
    • Open RNMacosSample/ios/RNMacosSample.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/Users/shoken/git/RNMacosSample" && npx react-native run-android
```

## macOS extension をインストール

プロジェクトディレクトリに移動して、 macOS用のライブラリをインストールします。同時にPodもインストールされます。

```bash
cd RNMacosSample
npx react-native-macos-init
```

エラーなく終了し、最後に以下の表示が出れば成功です。

```bash
% npx react-native-macos-init
npx: installed 114 in 6.575s
Reading application name from package.json...
Reading react-native version from node_modules...
Reading react-native version from node_modules...
# ----省略----
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `RNMacosSample.xcworkspace` for this project from now on.
Pod installation complete! There are 29 dependencies from the Podfile and 26 total pods installed.

  Run instructions for macOS:
    • npx react-native run-macos
    - or -
    • Open macos/RNMacosSample.xcworkspace in Xcode or run "xed -b macos"
    • yarn start:macos
    • Hit the Run button
```

## react-native run-macos でアプリを起動

```bash
npx react-native run-macos
```

React Nativeアプリと同様に、Terminalの別ウィンドウでMetro Bundlerが起動して、 `RNMacosSample`アプリが起動したら成功です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32750/acf79460-577f-2f33-c946-b0cfa5d06240.png)

# rssreaderアプリを起動させる

次に、リポジトリに[Pull Request](https://github.com/microsoft/react-native-windows-samples/pull/90)が送られている[rssreader](https://github.com/qmatteoq/react-native-windows-samples/tree/master/samples/rssreader)を動かしてみます。

## リポジトリをclone

```bash
git clone git@github.com:qmatteoq/react-native-windows-samples.git
```

## rssreaderディレクトリに移動

```bash
cd react-native-windows-samples/samples/rssreader
```

## rssreaderアプリを起動

```bash
yarn install
cd macos && pod install && cd ..
npx react-native run-macos
```

起動しました！

![Screen Shot 2020-05-17 at 0.24.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32750/1f998f9a-8316-3c53-815d-abde85dc810c.png)

# 公開予定のReact Native for macOSの公式ブログ記事

リポジトリに[5月更新のブログドラフト記事](https://github.com/microsoft/react-native-windows-samples/pull/109)がPull Requestで送られていたので近日中に公開されそうです。

[React Native for macOS, and more!](https://github.com/microsoft/react-native-windows-samples/blob/kisai/build-blog-update/website/blog/2020-05-18-rn4mupdadates.md)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32750/e909cc39-d6e7-9587-f9cd-e61bcd36ec47.png)

# 注意: 公式ドキュメント通りに進めるとエラー

2020年5月17日時点で、公式ドキュメントの[Get Started with macOS](https://microsoft.github.io/react-native-windows/docs/rnm-getting-started)にあるコマンドでは一部エラーになります。

一番最初の Install React Native for macOS に記載されている `npx react-native init <projectName> --version 0.61` を実行するとエラーになります。

```bash
% npx react-native init sampleProject --version 0.61
This will walk you through creating a new React Native project in /Users/shoken/git/sample
Using yarn v1.22.4
Installing 0.61...
yarn add v1.22.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/0.61: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/shoken/git/sample/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Error: Command failed: yarn add 0.61 --exact
    at checkExecSyncError (child_process.js:621:11)
    at execSync (child_process.js:657:15)
    at run (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:294:5)
    at createProject (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:249:3)
    at init (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 1725,
  stdout: null,
  stderr: null
}
Command `yarn add 0.61 --exact` failed.
```



バージョン指定にパッチバージョンまで指定すると成功します。

```diff
- npx react-native init <projectName> --version 0.61
+ npx react-native init <projectName> --version 0.61.5
```

上記修正は[Pull Request](https://github.com/microsoft/react-native-windows-samples/pull/111) 出したので、マージ待ちです。

追記: マージされました。