LoginSignup
4
3

More than 5 years have passed since last update.

react-native > react-native-firebase

Posted at

Initial setup - Installation | React Native Firebase

アプリ作成

ベースのアプリを作成する

react-native initでアプリのプリジェクトファイルを作成します。

react-native init firebase1

作成されたフォルダをVisual Studio Codeで開きます。

react-native-firebaseの追加

VS Codeのターミナルから以下コマンドを打ち、react-native-firebaseを追加します。

npm install --save react-native-firebase

Firebase

新しいプロジェクトを作成

コンソールから新しいプロジェクトを作成します。
Firebase console

以下に沿ってGoogleService-Info.plistのダウンロードまで進みます。
React-Native-Firebaseを試して見る - Qiita

プロジェクトフォルダ配下の以下に保存します。
ios/[YOUR APP NAME]/GoogleService-Info.plist

AppDelegate.m

iOS - Installation | React Native Firebase

ios/[YOUR APP NAME]/AppDelegate.m file

#import <Firebase.h>[FIRApp configure];を追加します。

以下のような感じになります。

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.h>
@implementation AppDelegate

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

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

Install Firebase Library

Cocoapodsを使用してFirebase SDKをインストールすることを推奨しているとの事です。

Podfile 作成。

Podfile がない場合は作成します。
Firebase を iOS プロジェクトに追加する  |  Firebase

cd ios
pod init

Podfileができます。
tvOSTestsが2回宣言されているようですが、これはバグのようです。
tvOSTestsを削除します。

Podインストール

以下コマンドでインストールします。

pod install

UPDATEもやっときます。


pod update

Link React Native Firebase

プロジェクト直下のフォルダに移動して以下コマンドを打ちます

react-native link react-native-firebase

結果

Scanning folders for symlinks in /Users/atsu/react_native/Firebase/firebase1/node_modules (19ms)
rnpm-install info Linking react-native-firebase ios dependency
rnpm-install info Platform 'ios' module react-native-firebase has been successfully linked
rnpm-install info Linking react-native-firebase android dependency
rnpm-install info Platform 'android' module react-native-firebase has been successfully linked

サンプルアプリ

ようやくここに戻ってこれました。
Initial setup - Installation | React Native Firebase

import firebase from 'react-native-firebase';

firebase.auth()
  .signInAnonymouslyAndRetrieveData()
  .then(credential => {
    if (credential) {
      console.log('default app user ->', credential.user.toJSON());
    }
  });

pod 'Firebase/Auth'

pod install

react-native run-ios

podのインストールやりなおし

cd ios
rm -rf Pods/
pod install
rm -rf node_modules/
npm i
4
3
0

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
4
3