新 Firebase のどの機能を React Native で使えるのか調べてみた。
現在使える機能
基本的に次のページで Web で使える機能は React Native でも使えるよう。 Realtime Database 以外は未検証。
- Cloud Messaging
- Authentication
- Realtime Database
- Storage
- Hosting
その他の機能は bridge 経由になる。 Analytics はすでに bridge がある。
それ以外はいまのところ自前で bridge を書く必要がある。
セットアップ方法
Firebase プロジェクト作成
次のボタンを押して新しいプロジェクトを作成する。
config の情報を次の位置から取得する。
次の apiKey, authDoamin, databaseURL, storageBucket の値をひかえておく。
React Native セットアップ
サンプルプロジェクト
サンプルプロジェクトとして TODO アプリを作ってみたので参考にどうぞ。
TODO 追加
TODO チェック
TODO 削除
React Native のプロジェクトを作成する。
react-native init fb-rn-sample
firebase パッケージをインストール。
npm install --save firebase
firebase を使う際に発行された API key で初期化する必要がある。
たとえば次のように initializeApp までしたオブジェクトを返すようなものをひとつ作っておくと便利。
firebase.js
import firebase from 'firebase'
import CONFIG from './config'
const config = {
apiKey: CONFIG.API_KEY,
authDomain: CONFIG.AUTH_DOMAIN,
databaseURL: CONFIG.DATABASE_URL,
storageBucket: CONFIG.STORAGE_BUCKET,
};
firebase.initializeApp(config)
export default firebase
config.js
export default {
API_KEY: "上記でひかえた値",
AUTH_DOMAIN: "上記でひかえた値",
DATABASE_URL: "上記でひかえた値",
STORAGE_BUCKET: "上記でひかえた値",
}
実際は react-native-config などを使って git repo に commit しないようにすべきだけど例なので。
アプリ作成
ここまで揃ったらあとは Realtime Database を使うだけ。
import firebase from './firebase'
const db = firebase.database();
const ref = db.ref('todos');
ref に対して Realtime Database API を用いて操作できる。
- https://firebase.google.com/docs/database/web/save-data
- https://firebase.google.com/docs/database/web/retrieve-data
これはサンプルをみたほうがわかりやすいかな。