LoginSignup
12
8

More than 5 years have passed since last update.

CocoaPodsを使わずにReact Native のプロジェクトをFirebaseと連携する

Last updated at Posted at 2018-09-25

やりたいこと

ReactNativeで構築したアプリをFirebaseと連携したい!
最終的にはDynamicLinkを使いたいというのが理由です。
(DynamicLink自体は別記事に書こうと思う)

そして、今回はCocoaPodsを使わないという縛りがあります。←これ重要
普通にググるとpod installをしろと死ぬほど出てきます。

しかし!!

CocoaPods入れると余計な依存関係が増えるという大きなデメリットがあります。
ただでさえ、yarn とかnpmとかで管理しているパッケージの依存関係が少しでもおかしいとReactNative はビルドですぐ死にますが、CocoaPods入れた日にはもうリリースビルドなんて30年ぐらいかかります。

そこで、今回はCocoaPodsを使わないでfirebaseと連携します。
(Firebaseの公式では推奨はpod installしろてなってるんだけどね)

下準備

react-native init からのreact-native run-ios
でビルド成功することを確認したプロジェクトを用意しました。
↓何もない人はこの記事の手順で作ってみてください。これの続きです
https://qiita.com/Umibows/items/175a066c1259ff4b0158

下のような画面が出ています。

スクリーンショット 2018-09-23 23.43.01.png

連携手順

http://rennnosukesann.hatenablog.com/entry/2018/05/29/235733
↑基本的にはこのサイトの手順でOK!

ただし、なんども言いますがCocoaPodsは使いません!ので
firebaseコンソールで設定していく中でのこの「firebase SDKの追加」は手動でやります。
スクリーンショット 2018-09-25 15.50.44.png

https://firebase.google.com/docs/ios/setup
1. まず↑からSDKをzipでダウンロードして、展開
2. 展開した「Firebase」というフォルダを下のxcodeのサイドバーのプロジェクトファイルの直下にドラッグ&ドロップする

スクリーンショット 2018-09-25 15.56.50.png
3. 下のような画面が出てくるのでチェックをこの画像のようにつけてFinishする
(自分は追加したframeworkのファイル群をgitにあげたかったのでこのようにしたが、好みで、create folder referenceにチェックしてもいいと思う。FaceBookSDKとかだとサイズがでかすぎてreferenceの追加になると思う。ただし、search pathを整備する必要が生じる)

スクリーンショット 2018-09-25 15.56.21.png
この状態だとlinkがうまくいっていなくてビルドは失敗します。

4. プロジェクトファイルのGeneral→linked frameworks and libraries →+をクリック→Add Other → Firebaseフォルダの中の必要なライブラリを全選択してopen
スクリーンショット 2018-09-25 16.03.04.png

5. AppDelegate.m#import "Firebase.h"追記(firebaseコンソールでは@import Firebase;をかけと言われているが、エラー吐かれた)

6.   AppDelegate.mのdidFinishLaunchingWithOptionsの中に[FIRApp configure];追記(これはコンソールの指示通りでOK)

AppDelegate.m
#import "AppDelegate.h"
#import "Firebase.h"  <--------追記
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  [FIRApp configure];  <--------追記

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"AwesomeApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

ここまでちゃんとできて入ればコンソールの最後の設定で下のように連携完了するはず!!

スクリーンショット 2018-09-25 16.17.02.png

ちなみに、手動で連携しているので、ビルドしようとするとLinking library: Mach-O linker errorが出るかもしれない。
「〇〇 from reference」みたいなエラーメッセージなら、General →Linked Frameworks and Librariesから必要なライブラリを追加すれば治る。
下の場合、StoreKit.frameworkとlibsqlite3.0.tbd, WebKit.framework入れたら治った
スクリーンショット 2018-09-25 17.50.36.png

参考にしたページ

https://firebase.google.com/docs/ios/setup
http://rennnosukesann.hatenablog.com/entry/2018/05/29/235733
http://utwang.io/2016/07/14/firebase-manual-install/
https://joyplot.com/documents/2016/09/18/xcode-link-error-framework/
http://www.mokacoding.com/blog/setting-up-firebase-without-cocoapods/

12
8
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
8