React native firebase (#261)

* Fix API doc upload utility (catch errors better)
* `react-native-firebase` complete example added
* Native modules docs updated

Author: prescottprue

.gitignore

@@ -1,14 +1,84 @@
-# Dependency directory
+# ---- Dependency directory ----
 node_modules
+
+# ---- Logs ----
+*.log
+
+# OS-specific files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+
+/.idea
+
+# ---- Project ----
 examples/**/node_modules
+_book/**
+_site/**
 coverage
 dist
 es
 lib
-_book/**
-_site/**
-# Logs
-*.log
-.DS_Store
 examples/complete/react-native/ios/build
-/.idea
+examples/complete/react-native-firebase/ios/build
+
+# ---- React Native ----
+# Xcode
+*.pbxuser
+*.mode1v3
+*.mode2v3
+*.perspectivev3
+*.xcuserstate
+project.xcworkspace/
+xcuserdata/
+
+# Built application files
+**/android/**/build/
+
+# Crashlytics configuations
+android/com_crashlytics_export_strings.xml
+
+# Signing files
+android/.signing/
+
+# Local configuration file (sdk path, etc)
+**/android/local.properties
+
+# Gradle generated files
+**/android/.gradle/
+
+# Signing files
+android/.signing/
+
+# User-specific configurations
+android/.idea/gradle.xml
+android/.idea/libraries/
+android/.idea/workspace.xml
+android/.idea/tasks.xml
+android/.idea/.name
+android/.idea/compiler.xml
+android/.idea/copyright/profiles_settings.xml
+android/.idea/encodings.xml
+android/.idea/misc.xml
+android/.idea/modules.xml
+android/.idea/scopes/scope_settings.xml
+android/.idea/vcs.xml
+**/android/**/*.iml
+ios/RnFirebase.xcodeproj/xcuserdata
+ehthumbs.db
+Thumbs.dbandroid/gradle
+android/gradlew
+android/build
+android/.gradle
+android/gradlew.bat
+android/gradle
+lib/.watchmanconfig
+.idea
+.gradle
+local.properties
+*.iml
+**/ios/Pods/**
+**/ios/build/**
+**/ios/ReactNativeFirebaseDemo.xcworkspace/

README.md

@@ -63,7 +63,7 @@ Include `reactReduxFirebase` in your store compose function and  `firebaseStateR
 ```javascript
 import { createStore, combineReducers, compose } from 'redux'
 import { reactReduxFirebase, firebaseStateReducer } from 'react-redux-firebase'
-import * as firebase from 'firebase'
+import firebase from 'firebase'
 
 // Add Firebase to reducers
 const rootReducer = combineReducers({

bin/api-docs-upload.js

@@ -2,10 +2,10 @@ const exec = require('child-process-promise').exec
 const version = require('../package.json').version
 
 /**
-  NOTE: Split into two arrays because gsutil acts differently when
-  no files exist at a location. First array includes at least one file for each
-  folder that will be copied in the second.
-*/
+ * NOTE: Split into two arrays because gsutil acts differently when
+ * no files exist at a location. First array includes at least one file for each
+ * folder that will be copied in the second.
+ */
 const first = [
   '_book/index.html',
   '_book/search_index.json',
@@ -26,15 +26,15 @@ const project = 'docs.react-redux-firebase.com'
  * @return {Promise} Resolves with stdout of running command
  * @private
  */
-const runCommand = (cmd) => {
-  const baseCommand = cmd.split(' ')[0]
-  return exec(baseCommand)
+const runCommand = (cmd) =>
+  exec(cmd)
     .catch((err) =>
-      err.message && err.message.indexOf('not found') !== -1
-        ? Promise.reject(new Error(`${baseCommand} must be installed to upload`))
-        : Promise.reject(err)
+      Promise.reject(
+        err.message && err.message.indexOf('not found') !== -1
+          ? new Error(`${cmd.split(' ')[0]} must be installed to upload`)
+          : err
+      )
     )
-}
 
 /**
  * Upload file or folder to cloud storage. gsutil is used instead of
@@ -44,10 +44,13 @@ const runCommand = (cmd) => {
  * @private
  */
 const upload = (entityPath) => {
-  const prefix = `history/${version.split('-')[0]}`
+  const prefix = `history/v${version.split('-')[0]}`
   const uploadPath = `${project}/${prefix}/${entityPath.replace('_book/', '').replace('/**', '')}`
-  return runCommand(`gsutil -m cp -r -a public-read ${entityPath} gs://${uploadPath}`)
-    .then((stdout) => ({ stdout, uploadPath }))
+  const command = `gsutil -m cp -r -a public-read ${entityPath} gs://${uploadPath}`
+  return runCommand(command)
+    .then(({ stdout, stderr }) =>
+      stdout ? Promise.reject(stdout) : ({ output: stderr, uploadPath })
+    )
 }
 
 /**
@@ -60,16 +63,21 @@ const uploadList = (files) => {
   return Promise.all(
     files.map(file =>
       upload(file)
-        .then(({ uploadPath }) => {
+        .then(({ uploadPath, output }) => {
           console.log(`Successfully uploaded: ${uploadPath}`) // eslint-disable-line no-console
-          return file
+          return output
+        })
+        .catch((err) => {
+          console.log('error:', err.message || err) // eslint-disable-line no-console
+          return Promise.reject(err)
         })
     )
   )
 }
 
 (function () {
-  uploadList(first)
+  runCommand('gsutil') // check for existence of gsutil
+    .then(() => uploadList(first))
     .then(() => uploadList(second))
     .then(() => {
       console.log('Docs uploaded successfully') // eslint-disable-line no-console

docs/recipes/react-native.md

@@ -6,6 +6,58 @@ Regardless of which path you want to take, initial setup is the same, so we will
 
 **NOTE:** Make sure you include `enableRedirectHandling: false` when using react-native with `v2.0.0`. This is required to disable redirect handling (which uses http) since it is not supported in react-native. There has been discussion of a way to make this happen automatically, but for now it is required.
 
+## Native Modules
+
+Passing in an instance also allows for libraries with similar APIs (such as [`react-native-firebase`](https://github.com/invertase/react-native-firebase)) to be used instead:
+
+1. Follow [use instructions in README](http://react-redux-firebase.com/#use)
+1. When creating redux store pass `react-native-firebase` App instance into `reactReduxFirebase` when creating store:
+
+  **createStore.js**
+  ```js
+  import { compose, createStore } from 'redux';
+  import RNFirebase from 'react-native-firebase';
+  import { getFirebase, reactReduxFirebase } from 'react-redux-firebase';
+  import thunk from 'redux-thunk';
+  import makeRootReducer from './reducers';
+
+  const reactNativeFirebaseConfig = {
+    debug: true
+  };
+
+  const reduxFirebaseConfig = {
+    userProfile: 'users', // save users profiles to 'users' collection
+  };
+
+  export default (initialState = { firebase: {} }) => {
+    // initialize firebase
+    const firebase = RNFirebase.initializeApp(reactNativeFirebaseConfig);
+
+    const store = createStore(
+      makeRootReducer(),
+      initialState,
+      compose(
+       reactReduxFirebase(firebase, reduxFirebaseConfig), // pass initialized react-native-firebase app instance
+       // applyMiddleware can be placed here
+      )
+    );
+
+    return store;
+  };
+  ```
+
+Full `react-native-firebase` example app source with styling available [in the react-native-firebase complete example](https://github.com/prescottprue/react-redux-firebase/tree/v2.0.0/examples/complete/react-native-firebase).
+
+### Setup
+1. Run `create-react-native-app my-app`
+1. Enter the app folder `cd my-app`
+1. Run the eject command `yarn run eject` or `npm run eject` and choose "Regular React Native App"
+1. Run `npm i --save redux react-redux react-redux-firebase@canary redux-thunk`
+1. Open the xcode project in ios/myapp
+  * Drag the `GoogleService-Info.plist` into the project -> check box saying copy
+  * switch the identifier to the one you just gave Firebase
+1. Follow the [react-native-firebase initial setup guide](http://invertase.io/react-native-firebase/#/initial-setup)
+
 ## JS/Web
 
 **NOTE**: Only works for versions `v2.0.0-alpha` and higher. For older versions please view the docs associated with previous version.
@@ -36,37 +88,8 @@ const store = createStore(
 )
 ```
 
-## Native Modules
-
-Passing in an instance also allows for libraries with similar APIs (such as [`react-native-firebase`](https://github.com/invertase/react-native-firebase)) to be used instead:
-
-```js
-import RNFirebase from 'react-native-firebase';
-
-const configurationOptions = {
-  debug: true
-};
-
-const firebase = RNFirebase.initializeApp(configurationOptions);
-
-const reduxConfig = {
-  enableRedirectHandling: false // required
-}
-
-const store = createStore(
-  reducer,
-  undefined,
-  compose(
-   reactReduxFirebase(firebase, reduxConfig), // pass in react-native-firebase instance instead of config
-   applyMiddleware(...middleware)
- )
-)
-```
-The [react-native-firebase initial setup guide](http://invertase.io/react-native-firebase/#/initial-setup) has more information about how to setup your project for iOS/Android.
-
 Full project source: [react-native complete example app](https://github.com/prescottprue/react-redux-firebase/tree/master/examples/complete/react-native)
 
-
 ### Setup
 
 1. Click "Add Firebase To iOS"

examples/complete/react-native-firebase/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "babel-preset-react-native-stage-0/decorator-support"
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        "transform-react-jsx-source"
+      ]
+    }
+  }
+}

examples/complete/react-native-firebase/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.expo/
+npm-debug.*

examples/complete/react-native-firebase/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/complete/react-native-firebase/App.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Open up App.js to start working on your app!</Text>
+        <Text>Changes you make will automatically reload.</Text>
+        <Text>Shake your phone to open the developer menu.</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

examples/complete/react-native-firebase/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import App from './App';
+
+import renderer from 'react-test-renderer';
+
+it('renders without crashing', () => {
+  const rendered = renderer.create(<App />).toJSON();
+  expect(rendered).toBeTruthy();
+});

examples/complete/react-native-firebase/README.md

@@ -0,0 +1,11 @@
+# React Native Firebase Example
+
+> Simple example of using native modules with react-redux-firebase by using react-native-firebase
+
+This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app).
+
+
+## Get Started
+
+1. `yarn install`
+1. `react-native run-ios`