react-native-fbsdkを使おうとしたら "RCTFBLikeView" does not exist エラー


react-native-fbsdkをインストール&リンクしてFacebookログインボタンを設置してみましたが、クリックしても何も起こらない。

chromeのデバッグコンソールには赤い文字で以下のwarningが出力されていました。

```
Warning: Native component for "RCTFBLikeView" does not exist
Warning: Native component for "RCTFBLoginButton" does not exist
Warning: Native component for "RCTFBSendButton" does not exist
Warning: Native component for "RCTFBShareButton" does not exist
```

あらためて[公式ページ](https://github.com/facebook/react-native-fbsdk)を見てみると、以下の記述を発見.

```
The react-native-fbsdk has been linked by rnpm, the next step will be downloading and linking the native Facebook SDK for iOS. Make sure you have the latest Xcode installed. Open the .xcodeproj in Xcode found in the ios subfolder from your project's root directory. Now, follow all the steps in the Getting Started Guide for Facebook SDK for iOS. Along with FBSDKCoreKit.framework, don't forget to import FBSDKShareKit.framework and FBSDKLoginKit.framework into your Xcode project.
```

なるほどインストール&リンクだけじゃ不十分で、そもそもiosのネイティブのframeworkをxcodeプロジェクトに追加しておく必要があるのか。

書かれているように以下の3つのフレームワークを追加して再度トライ。

- FBSDKCoreKit.framework
- FBSDKShareKit.framework
- FBSDKLoginKit.framework

`react-native run-ios`でコケる。

```
framework not found Bolts for architecture x86_64
```

[stackoverflow](https://stackoverflow.com/questions/38407829/why-am-i-getting-an-error-regarding-bolts-framework-and-facebooksdk-when-im-not)に解決方法がありました。

ダウンロードしたFacebookSDKのフォルダに含まれる`Bolts.framework`も追加する必要がある。

再度`react-native run-ios`するも今度は起動時クラッシュする状況。
結局ネイティブの知識は必要なのねとか思いつつxcodeから直接デバッグ実行しログを確認する。

```
*** Terminating app due to uncaught exception 'InvalidOperationException', reason: 'fbauth2 is missing from your Info.plist under LSApplicationQueriesSchemes and is required for iOS 9.0'
```
ぐぐって [こちら](https://stackoverflow.com/questions/31986475/fbauth2-is-missing-from-your-info-plist-under-lsapplicationqueriesschemes-and-is)を参考に,Info.plistを修正する。
`LSApplicationQueriesSchemes`に`fbauth2`を指定してみました。
ちなみに `LSApplicationQueriesSchemes`は`canOpenURL`でURLスキーマが開けるかテストして良いURLスキーマを指定するみたいです。(説明は[こちら](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/LaunchServicesKeys.html))

しかし起動時クラッシュは治らない。
こんどは次のようなエラー

```
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSTaggedPointerString containsObject:]: unrecognized selector sent to instance 0xa326874756162667'
```

ぐぐって[このページ](https://stackoverflow.com/questions/32906178/facebook-sdk-login-throws-error-in-swift-2-ios-9)にたどり着く。

なるほどさっきやったInfo.plistへの修正がちょっと違ってたみたい。
ただしくは`LSApplicationQueriesSchemes`はarrayで指定して、その要素に`fbauth2`を含めるという修正が良さそう。
というわけで以下のような設定にInfo.plistを書き換えました。

```
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>
```

気を取り直して`react-native run-ios`を実行。
するとどうでしょう、今まで赤い枠線でしかなかった`LoginButton`がFacebookのログインボタンとなって表示されました。やったね！

![sc.png](https://qiita-image-store.s3.amazonaws.com/0/18273/266a88ea-3dd0-de07-5e26-35ea0517877d.png "sc.png")

早速タップしてみる。
うん、なんとなく予想してたけどクラッシュしました。

しかし段々慣れてきたNativeからは逃げられないと腹をくくり、xcodeでログを見るよ。

```
*** Terminating app due to uncaught exception 'InvalidOperationException', reason: 'App ID not found. Add a string value with your app ID for the key FacebookAppID to the Info.plist or call [FBSDKSettings setAppID:].'
```

ああ、FacebookのappIdを指定しろといってる。できるだけNativeのコードはいじらないようにするために、Info.plistに追記しました。

再度トライ、またクラッシュ。どんとこい。

```
*** Terminating app due to uncaught exception 'InvalidOperationException', reason: 'fbアプリID is not registered as a URL scheme. Please add it in your Info.plist'
```

ああ、ログイン後にアプリに戻るためのURLスキーマを設定しろと言われている。
xcodeでURLスキーマを追加する。

ここまでやってなんとなくわかったけど、`react-native install`とかreact-native-fbsdkインストールしても、ネイティブらへんの作業は別途やる必要がある。
というわけで基本に立ち返って、ネイティブのFacebookSDKの初期設定など諸々やった。

その結果やっとこさ、ReactNativeでFacebookログインできたとさ！

色々勉強になった。