10分でできるReactNativeとFirebaseの連動 #Firebase

ReactNative(CRNA)でFirebase RealtimeDatabaseを試した
複雑だと思っていたけどシミュレーターの動作確認まで10分くらいで簡単にできた

事前に必要なもの

Googleアカウント
npmが使える環境
- (今回使うモジュール)
  - create-react-native-app
  - firebase
  - react-native-dotenv
Expo XDE（シミュレータで動作確認しないならなくてもいい）
- 参考: Expo XDEでReact Native入門

FirebaseAPIキーの作成

Firebaseにアクセス
適当な名前でプロジェクトを作成
ウェブアプリに Firebase を追加

ReactNative(CRNA)のセットアップ

$ npm install -g create-react-native-app
$ create-react-native-app fireabase-test
$ cd fireabase-test/
$ npm install firebase react-native-dotenv

react-native-dotenvの設定

.babelrcのpresetsに「react-native-dotenv」を追加

$ vi .babelrc

.babelrc

{
  "presets": ["babel-preset-expo", "react-native-dotenv"],
  ...
}

※似たようなものでreact-native-configがあるがビルドしないと使えないため今回はreact-native-dotenv
参考: react-native-dotenv で定数を環境ごとに切り替える

.envファイルの作成

$ vi .env

※FirebaseAPIキーの作成でできた値を設定する

.env

API_KEY=<apiKey>
AUTH_DOMAIN=<authDomain>
DATABASE_URL=<databaseURL>
PROJECT_ID=<projectId>
STORAGE_BUCKET=<storageBucket>
MESSAGING_SENDER_ID=<messagingSenderId>

Firebaseの設定ファイル作成

$ vi firebase.js

firebase.js

import firebase from 'firebase'
import {
  API_KEY,
  AUTH_DOMAIN,
  DATABASE_URL,
  PROJECT_ID,
  STORAGE_BUCKET,
  MESSAGING_SENDER_ID
} from 'react-native-dotenv'

const config = {
  apiKey: API_KEY,
  authDomain: AUTH_DOMAIN,
  databaseURL: DATABASE_URL,
  projectId: PROJECT_ID,
  storageBucket: STORAGE_BUCKET,
  messagingSenderId: MESSAGING_SENDER_ID
}

firebase.initializeApp(config)

export default firebase

App.jsを修正

App.js

import React from 'react'
import { StyleSheet, Text, View, Button } from 'react-native'
import firebase from './firebase'

const db = firebase.database()
const ref = db.ref('test')

export default class App extends React.Component {
  state = {
    count: 0
  }

  componentDidMount() {
    ref.on('value', snapshot => this.setState(snapshot.val()))
  }

  componentWillUnmount() {
    ref.off('value')
  }

  plus = () => {
    ref.update({
      count: this.state.count + 1
    })
  }

  minus = () => {
    ref.update({
      count: this.state.count - 1
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>{this.state.count}</Text>
        <Button title="+" onPress={this.plus} />
        <Button title="-" onPress={this.minus} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

Firebaseを公開設定にする

FirebaseのDatabaseのルールを公開に設定する

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

10分でできるReactNativeとFirebaseの連動