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


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

事前に必要なもの
---------
- Googleアカウント
- npmが使える環境
    - (今回使うモジュール)
        - create-react-native-app
        - firebase
        - react-native-dotenv
- Expo XDE（シミュレータで動作確認しないならなくてもいい）
    - 参考: [Expo XDEでReact Native入門](https://qiita.com/ykubot/items/963df6499af5ffc3a0b2)

FirebaseAPIキーの作成
----

1. [Firebase](https://console.firebase.google.com/?hl=ja)にアクセス
2. 適当な名前でプロジェクトを作成
3. ウェブアプリに Firebase を追加

参考: [新 Firebase を React Native で使うためのまとめ](https://qiita.com/janus_wel/items/4892e404d9a81b8fd118)

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
```

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

※似たようなものでreact-native-configがあるがビルドしないと使えないため今回はreact-native-dotenv
参考: [react-native-dotenv で定数を環境ごとに切り替える](https://qiita.com/hotchpotch/items/f5661def49e0f54ec276)


.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
```

```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を修正
----

```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
  }
}
```


Expo XDEシミュレータで確認
-----

<img width="325" alt="firebasetest.png" src="https://qiita-image-store.s3.amazonaws.com/0/69627/905c26c7-887c-7a66-2369-12c3efe9e0d0.png">

サンプルリポジトリ
-----
https://github.com/HorieH/sandbox-react-native-firebase