Switched to ReactNative instead of rn

* Switched to using ReactNative instead of rn
* Roadmap updated with `react-native` stuff
* react-native complete example README added

Author: prescottprue

SUMMARY.md

@@ -14,6 +14,7 @@
   * [Epics](/docs/recipes/epics.md)
   * [Routing](/docs/recipes/routing.md)
   * [Redux Form](/docs/recipes/redux-form.md)
+  * [React Native](/docs/recipes/react-native.md)
   * [Populate](/docs/recipes/populate.md)
 * [API Reference](/docs/api/README.md)
   * [constants](/docs/api/constants.md)

docs/recipes/react-native.md

@@ -1,131 +1,145 @@
 # React Native
 
-**NOTE**: Only works for versions `v1.4.0-alpha` and higher. It is still in the early stages of support.
+[react-native complete example app](/examples/complete/react-native)
+
+**NOTE**: Only works for versions `v1.4.0-beta` and higher. It is still in the early stages of support.
 
 ## Setup
 
 1. Click "Add Firebase To iOS"
 <!-- TODO: Confirm this and get a picture -->
 1. Download `GoogleService-info.plist`
 1. Place `GoogleService-info.plist` in the folder of whichever platform you are using (i.e. `/ios`)
-1. Make sure you correctly setup [`react-native-google-signin`](https://github.com/devfd/react-native-google-signin) (means you should end up with a `GoogleSDK` folder in the folder matching your platform)
+1. Copy your client id out of the `GoogleService-info.plist` file (should end in `.apps.googleusercontent.com`)
+1. Place the client id into `iosClientId` variable within the example
 
 
 ## Example App Snippet
 
 This snippet is a condensed version of [react-native complete example](/examples/complete/react-native).
 
 ```js
-import React, { Component } from 'react';
+import React, { Component } from 'react'
+import { GoogleSignin, GoogleSigninButton } from 'react-native-google-signin'
+import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
+import { connect } from 'react-redux'
 import {
   AppRegistry,
   StyleSheet,
   Text,
   View,
   TouchableOpacity,
-} from 'react-native';
+} from 'react-native'
+import configureStore from './store'
+const initialState = { firebase: { authError: null, auth: undefined }}
+const store = configureStore(initialState)
 
-import { GoogleSignin, GoogleSigninButton } from 'react-native-google-signin';
 const iosClientId = '499842460400-teaflfd8695oilltk5qkvl5688ebgq6b.apps.googleusercontent.com' // get this from plist file
 
-class SigninSampleApp extends Component {
-  state = {
-    user: null
-  }
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+})
 
+@firebaseConnect()
+@connect(({ firebase }) => ({
+  auth: pathToJS(firebase, 'auth', undefined)
+}))
+export default class GoogleSigninSampleApp extends Component {
   componentDidMount() {
-    this._setupGoogleSignin();
+    this._setupGoogleSignin()
   }
 
   render() {
-    if (!this.state.user) {
+    const { auth } = this.props
+    if (!isLoaded(auth)) {
+      return (
+        <View style={styles.container}>
+          <Text>Loading...</Text>
+        </View>
+      )
+    }
+    if (!this.props.auth) {
       return (
         <View style={styles.container}>
           <GoogleSigninButton
             style={{width: 212, height: 48}}
             size={GoogleSigninButton.Size.Standard}
             color={GoogleSigninButton.Color.Auto}
-            onPress={this._signIn.bind(this)}
+            onPress={() => this._signIn()}
           />
         </View>
-      );
-    }
-
-    if (this.state.user) {
-      return (
-        <View style={styles.container}>
-          <Text style={{fontSize: 18, fontWeight: 'bold', marginBottom: 20}}>
-            Welcome {this.state.user.name}
-          </Text>
-          <Text>Your email is: {this.state.user.email}</Text>
-
-          <TouchableOpacity onPress={() => {this._signOut(); }}>
-            <View style={{marginTop: 50}}>
-              <Text>Log out</Text>
-            </View>
-          </TouchableOpacity>
-        </View>
-      );
+      )
     }
+    return (
+      <View style={styles.container}>
+        <Text style={{fontSize: 18, fontWeight: 'bold', marginBottom: 20}}>
+          Welcome {this.props.auth.displayName}
+        </Text>
+        <Text>
+          Your email is: {this.props.auth.email}</Text>
+
+        <TouchableOpacity onPress={() => {this._signOut() }}>
+          <View style={{marginTop: 50}}>
+            <Text>Log out</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    )
   }
 
+  // based on react-native-google-signin example
   async _setupGoogleSignin() {
     try {
-      await GoogleSignin.hasPlayServices({ autoResolve: true });
+      await GoogleSignin.hasPlayServices({ autoResolve: true })
       await GoogleSignin.configure({
         iosClientId,
-        // webClientId: '603421766430-60og8n04mebic8hi49u1mrcmcdmugnd5.apps.googleusercontent.com',
         offlineAccess: false
-      });
+      })
 
-      const user = await GoogleSignin.currentUserAsync();
-      console.log(user);
-      this.setState({user});
+      const user = await GoogleSignin.currentUserAsync()
+      const creds = this.props.firebase.auth.GoogleAuthProvider.credential(null, user.accessToken)
+      await this.props.firebase.auth().signInWithCredential(creds)
     }
     catch(err) {
-      console.log("Google signin error", err.code, err.message);
+      console.log("Google signin error", err.code, err.message)
     }
   }
 
   _signIn() {
+    const { auth } = this.props.firebase
     return GoogleSignin.signIn()
       .then((user) => {
-        console.log(user);
-        this.setState({user: user});
+        const creds = auth.GoogleAuthProvider.credential(null, user.accessToken)
+        return auth().signInWithCredential(creds)
       })
       .catch((err) => {
-        console.log('WRONG SIGNIN', err);
+        console.error('error authing with firebase:', err)
+        return Promise.reject(err)
       })
   }
 
   _signOut() {
     return GoogleSignin.revokeAccess()
       .then(() => GoogleSignin.signOut())
-      .then(() => {
-        this.setState({user: null});
-      })
+      .then(() => this.props.firebase.logout())
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('GoogleSigninSampleApp', () => GoogleSigninSampleApp);
+AppRegistry.registerComponent('GoogleSigninSampleApp', () => GoogleSigninSampleApp)
 
 ```

docs/roadmap.md

@@ -51,6 +51,7 @@ import { pathToJS, dataToJS, populatedDataToJS } from 'react-redux-firebase'
  *None Yet Planned*
 
 #### Features
+* Integration for [`react-native-google-signin`](https://github.com/devfd/react-native-google-signin) to simplify react-native authentication implementation
 * Nested populates [#85](https://github.com/prescottprue/react-redux-firebase/issues/85)
 
 ## Upcoming Major Version (`v2.0.0`)
@@ -68,6 +69,7 @@ import { pathToJS, dataToJS, populatedDataToJS } from 'react-redux-firebase'
   * Improved rendering/update performance for `react` as described in [#84](https://github.com/prescottprue/react-redux-firebase/issues/84)
 
 #### Features
+* `react-native` index file referenced in `package.json` that makes it no longer necessary to pass `ReactNative` in config
 * `AuthRequired` decorator (or decorator factory) that forces auth to exist before rendering component
 * Possibility of delayed initialization as mentioned in [#70](https://github.com/prescottprue/react-redux-firebase/issues/70) (more research needed)
 

examples/complete/react-native/README.md

@@ -0,0 +1,32 @@
+# React Native Complete Example
+
+## Getting Started
+
+**NOTE** This example assumes you have `react-native` installed
+
+1. Clone main repo
+1. Enter example folder by running `cd examples/complete/react-native`
+1. Install dependencies using `yarn install` or `npm install`
+1. Run using `react-native run-ios`
+
+## Dev Scripts
+* `npm run dev` - starts watcher and packager together concurrently
+
+## Application Structure
+
+```
+.
+├─ src                      # Application source code
+│  ├── index.js             # Application bootstrap and rendering
+│  └── Home.js              # Main page
+├- ios                      # Platform specific code, config and dependencies for iOS
+│  ├─ GoogleService-info.plist # iOS app config file downloaded from Firebase
+├─ scripts                  # Development helper scripts
+│  └── watch-and-copy.js    # Development helper that watches and copies changed files
+└─ index.ios.js             # iOS Application Mounting (connects iOS -> `/src`)
+```
+
+
+## Running Your Own
+
+If you are planning on running your own `react-native` project based on this one. Please make sure you follow the new setup steps in the [react-native recipe](/docs/recipes/react-native.md)

examples/complete/react-native/src/Home.js

@@ -14,8 +14,6 @@ const initialState = { firebase: { authError: null, auth: undefined }}
 const store = configureStore(initialState)
 
 const iosClientId = '499842460400-teaflfd8695oilltk5qkvl5688ebgq6b.apps.googleusercontent.com'; // get this from plist file
-const webClientId = '603421766430-60og8n04mebic8hi49u1mrcmcdmugnd5.apps.googleusercontent.com';
-
 
 const styles = StyleSheet.create({
   container: {
@@ -82,13 +80,12 @@ export default class SigninSampleApp extends Component {
       </View>
     );
   }
-
+  // based on google signin example
   async _setupGoogleSignin() {
     try {
       await GoogleSignin.hasPlayServices({ autoResolve: true });
       await GoogleSignin.configure({
         iosClientId,
-        webClientId,
         offlineAccess: false
       });
 
@@ -102,12 +99,15 @@ export default class SigninSampleApp extends Component {
   }
 
   _signIn() {
+    const { auth } = this.props.firebase
     return GoogleSignin.signIn()
       .then((user) => {
-        const creds = this.props.firebase.auth.GoogleAuthProvider.credential(null, user.accessToken)
-        return this.props.firebase.auth().signInWithCredential(creds)
+        const creds = auth.GoogleAuthProvider.credential(null, user.accessToken)
+        return auth()
+          .signInWithCredential(creds)
           .catch((err) => {
             console.error('error authing with firebase:', err)
+            return Promise.reject(err)
           })
       })
       .catch((err) => {

examples/complete/react-native/src/store.js

@@ -2,7 +2,7 @@ import { createStore, compose } from 'redux'
 import rootReducer from './reducer'
 import { firebase as fbConfig } from './config'
 import { reactReduxFirebase } from 'react-redux-firebase'
-import ReactNative from 'react-native'
+import { AsyncStorage } from 'react-native'
 
 export default function configureStore (initialState, history) {
   const createStoreWithMiddleware = compose(
@@ -11,7 +11,7 @@ export default function configureStore (initialState, history) {
         userProfile: 'users',
         enableLogging: false,
         enableRedirectHandling: false,
-        rn: ReactNative,
+        rn: { AsyncStorage },
       }
     ),
     typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f

src/compose.js

@@ -82,8 +82,9 @@ export default (fbConfig, otherConfig) => next =>
     }
 
     // Handle react-native
-    if (configs.rn) {
-      const { AsyncStorage } = configs.rn
+    if (configs.ReactNative) {
+      const { AsyncStorage } = configs.ReactNative
+      // Stub firebase's internal's with react-native (based on firebase's react-native index file)
       firebase.INTERNAL.extendNamespace({
         INTERNAL: {
           reactNative: {