Version 1.4.0 Beta 4 (#105)

* made use of [`hoist-non-react-statics`](https://github.com/mridgway/hoist-non-react-statics) (following pattern set forth in [`react-redux`'s connect](https://github.com/reactjs/react-redux/blob/master/src/components/connectAdvanced.js#L281)) to fix issue where statics where not being passed. For example, when using `StackNavigator` with react-native:

```js
@firebaseConnect() // <- was keeping statics from being passed
@connect(({ firebase }) => ({  // <- hoists statics
  auth: pathToJS(firebase, 'auth')
}))
export default class Home extends Component {
  static navigationOptions = {  // <- was not being passed to resulting wrapped component
    title: 'Some Title'
  }

  render () {
    return (
      <View>
        <Text>React Native + Firebase!</Text>
      </View>
    )
  }
}
```

* create your own react-native app instructions added to docs (including pictures)
* user and credential are now returned from login method (solves #106)
* `onRedirectResult` config option added (runs when redirect result occurs)
* Material-ui complete example updated to use field level validation
* Docs added for `onAuthStateChanged` and `onRedirectResult` config options

docs/api/compose.md

@@ -21,8 +21,13 @@ Middleware that handles configuration (placed in redux's
         profile when logging in. (default: `false`)
     -   `config.enableRedirectHandling` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to enable
         auth redirect handling listener. (default: `true`)
+    -   `config.onAuthStateChanged` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function run when auth state
+        changes. Argument Pattern: `(authData, firebase, dispatch)`
+    -   `config.onRedirectResult` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function run when redirect
+        result is returned. Argument Pattern: `(authData, firebase, dispatch)`
     -   `config.profileFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying how user profile is saved.
-    -   `config.uploadFileDataFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying how file meta data is written during file uploads
+    -   `config.uploadFileDataFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying
+        how file meta data is written during file uploads
     -   `config.profileParamsToPopulate` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) \| [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))** Parameters within
         profile object to populate
     -   `config.autoPopulateProfile` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to

docs/auth.md

@@ -79,7 +79,7 @@ export default firebaseConnect()(SomeComponent)
 
 
 ##### Returns
-[**Promise**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) with authData in case of success or the error otherwise.
+[**Promise**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) with an object containing profile, user, (also credential if using oAuth provider) in case of success or the error otherwise.
 
 ##### Examples
 

docs/recipes/react-native.md

@@ -14,10 +14,47 @@
 1. Place the client id into `iosClientId` variable within the example
 
 
-## Example App Snippet
+## Example App Snippets
 
 This snippet is a condensed version of [react-native complete example](/examples/complete/react-native).
 
+**store.js**
+```js
+import { createStore, compose } from 'redux'
+import rootReducer from './reducer'
+import { firebase as fbConfig } from './config'
+import { reactReduxFirebase } from 'react-redux-firebase'
+import { AsyncStorage } from 'react-native'
+
+export default function configureStore (initialState, history) {
+  // use compose to make a function that will create store
+  const createStoreWithMiddleware = compose(
+    reactReduxFirebase(fbConfig,
+      {
+        userProfile: 'users',
+        enableLogging: false,
+        ReactNative: { AsyncStorage },
+      }
+    )
+  )(createStore)
+
+  // create store
+  const store = createStoreWithMiddleware(rootReducer)
+
+  // Enable Webpack hot module replacement for reducers
+  if (module.hot) {
+    module.hot.accept('./reducer', () => {
+      const nextRootReducer = require('./reducer')
+      store.replaceReducer(nextRootReducer)
+    })
+  }
+
+  return store
+}
+```
+
+**App.js**:
+
 ```js
 import React, { Component } from 'react'
 import { GoogleSignin, GoogleSigninButton } from 'react-native-google-signin'
@@ -143,3 +180,106 @@ export default class GoogleSigninSampleApp extends Component {
 AppRegistry.registerComponent('GoogleSigninSampleApp', () => GoogleSigninSampleApp)
 
 ```
+
+
+## Creating Your Own
+
+We are going to use the project name Devshare for example here. For your project, use your project name everywhere where Devshare is used.
+
+### Start
+1. Make sure you have [`create-react-native-app`](https://github.com/react-community/create-react-native-app) installed, or install it using `npm install -g create-react-native-app`.
+1. Run `create-react-native-app Devshare` (again replace Devshare with the name of your project)
+1. After that is complete, eject using `yarn eject` or `npm run eject`
+
+### Download Firebase Config
+1. Download `GoogleService-Info.plist` file from Firebase
+  1. Visit Over page and click Add Firebase to iOS
+
+    ![img](/docs/static/FirebaseOverview.png)
+
+  1. Fill in application info in register modal and click register
+
+    ![img](/docs/static/RegisterApp.png)
+
+  1. Download the .plist file and place it in your `ios` folder
+
+    ![img](/docs/static/PlistDownload.png)
+
+### Add `react-native-google-signin`
+
+1. Add [`react-native-google-signin`](https://github.com/devfd/react-native-google-signin) to the project
+  1. Run `npm i --save react-native-google-signin` to include it within JS dependencies
+  1. Download the [`react-native-google-signin`](https://github.com/devfd/react-native-google-signin) zip, and unzip it
+  1. Drag and drop the `ios/GoogleSdk` folder to your xcode project. (Make sure `Copy items if needed` **IS** ticked)
+  1. Add RNGoogleSignin to project build phase
+    1. Click Name in sidebar of Xcode
+
+        ![img](/docs/static/BuildPhase.png)
+
+    1. In your project build phase -> `Link binary with libraries` step, add:
+      * `libRNGoogleSignin.a`
+      * `AddressBook.framework`
+      * `SafariServices.framework`
+      * `SystemConfiguration.framework`
+      * `libz.tbd`
+
+    **Note:** (May take clicking "Add Other" button then selecting the `GoogleSdk` folder and `RNGoogleSignin` folder)
+
+1. Make sure all dependencies are correctly linked to your project:
+  [![link config](https://github.com/apptailor/react-native-google-signin/raw/master/img/link-config.png)](#config)
+
+1. Configure URL types in the ```Info``` panel of your xcode project
+  1. add a URL with scheme set to your ```REVERSED_CLIENT_ID``` (found inside the plist)
+  1. add a URL with scheme set to your ```bundle id```
+
+  ![img](/docs/static/UrlTypes.png)
+
+1. Make sure you import `RNGoogleSignin.h` in your `AppDelegate.m` like so:
+
+  ```objc
+  // add this line before @implementation AppDelegate
+  #import <RNGoogleSignin/RNGoogleSignin.h>
+
+  // add this method before @end
+  - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
+    sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
+
+    return [RNGoogleSignin application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
+  }
+
+  ```
+
+At the end of this step, your Xcode config should look similar to this:
+
+[![xcode config](https://github.com/apptailor/react-native-google-signin/raw/master/img/url-config.png)](#config)
+
+### Set Open URLs
+
+Only one `openURL` method can be defined, so if you have multiple listeners which should be defined (for instance if you have both Google and Facebook OAuth), you must combine them into a single function like so:
+
+**AppDelegate.m:**
+
+```objc
+- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
+  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
+
+  return [[FBSDKApplicationDelegate sharedInstance] application:application
+                                                        openURL:url
+                                              sourceApplication:sourceApplication
+                                                     annotation:annotation
+         ]
+         || [RNGoogleSignin application:application
+                                openURL:url
+                      sourceApplication:sourceApplication
+                             annotation:annotation
+            ];
+}
+```
+
+### Run It
+
+Now, if everything was done correctly you should be able to do the following:
+
+```bash
+react-native run-ios
+```

examples/complete/material/src/constants/formNames.js

@@ -1,4 +1,6 @@
 export const ACCOUNT_FORM_NAME = 'account'
+export const LOGIN_FORM_NAME = 'login'
+export const SIGNUP_FORM_NAME = 'signup'
 export const RECOVER_CODE_FORM_NAME = 'recoverCode'
 export const RECOVER_EMAIL_FORM_NAME = 'recoverEmail'
 

examples/complete/material/src/routes/Account/containers/AccountContainer.js

@@ -3,7 +3,6 @@ import Paper from 'material-ui/Paper'
 import { connect } from 'react-redux'
 import { reduxForm } from 'redux-form'
 import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
-import { submit } from 'redux-form'
 import { reduxFirebase as rfConfig } from 'config'
 import { ACCOUNT_FORM_NAME } from 'constants/formNames'
 import { UserIsAuthenticated } from 'utils/router'
@@ -19,11 +18,7 @@ import classes from './AccountContainer.scss'
   ({ firebase }) => ({
     auth: pathToJS(firebase, 'auth'),
     account: pathToJS(firebase, 'profile'),
-  }),
-  {
-    // action for submitting redux-form
-    submitForm: () => (dispatch) => dispatch(submit(ACCOUNT_FORM_NAME))
-  }
+  })
 )
 export default class Account extends Component {
   static propTypes = {
@@ -38,7 +33,7 @@ export default class Account extends Component {
   state = { modalOpen: false }
 
   handleLogout = () => {
-    this.props.firebase.logout()
+    return this.props.firebase.logout()
   }
 
   toggleModal = () => {
@@ -57,7 +52,7 @@ export default class Account extends Component {
   }
 
   render () {
-    const { account, submitForm } = this.props
+    const { account } = this.props
 
     if (!isLoaded(account)) {
       return <LoadingSpinner />
@@ -77,7 +72,6 @@ export default class Account extends Component {
             <div className={classes.meta}>
               <AccountForm
                 account={account}
-                submitForm={submitForm}
                 onSubmit={this.updateAccount}
               />
             </div>
@@ -87,4 +81,3 @@ export default class Account extends Component {
     )
   }
 }
-0

examples/complete/material/src/routes/Home/containers/HomeContainer.js

@@ -84,7 +84,7 @@ export default class Home extends Component {
     } else {
       newTodo.owner = 'Anonymous'
     }
-    this.props.firebase.push('/todos', newTodo)
+    return this.props.firebase.push('/todos', newTodo)
   }
 
   render () {

examples/complete/material/src/routes/Login/components/LoginForm/LoginForm.js

@@ -2,54 +2,50 @@ import React, { PropTypes } from 'react'
 import { Link } from 'react-router'
 import RaisedButton from 'material-ui/RaisedButton'
 import Checkbox from 'material-ui/Checkbox'
-
 import { Field, reduxForm } from 'redux-form'
+import { RECOVER_PATH } from 'constants/paths'
+import { LOGIN_FORM_NAME } from 'constants/formNames'
 import TextField from 'components/TextField'
-
 import classes from './LoginForm.scss'
 
-const validate = values => {
-  const errors = {}
-  if (!values.email) errors.email = 'Required'
-  if (!values.password) errors.password = 'Required'
-  return errors
-}
+const required = value => value ? undefined : 'Required'
+const email = value =>
+  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
+  'Invalid email address' : undefined
 
 export const LoginForm = ({ handleSubmit, submitting }) => (
-  <form className={classes['container']} onSubmit={handleSubmit}>
-    <div>
-      <Field
-        name='email'
-        component={TextField}
-        label='Email'
-      />
-    </div>
-    <div>
-      <Field
-        name='password'
-        component={TextField}
-        label='Password'
-        type='password'
-      />
-    </div>
-    <div className={classes['submit']}>
+  <form className={classes.container} onSubmit={handleSubmit}>
+    <Field
+      name='email'
+      component={TextField}
+      label='Email'
+      validate={[required, email]}
+    />
+    <Field
+      name='password'
+      component={TextField}
+      validate={[required]}
+      label='Password'
+      type='password'
+    />
+    <div className={classes.submit}>
       <RaisedButton
         label='Login'
         primary
         type='submit'
         disabled={submitting}
       />
     </div>
-    <div className={classes['options']}>
-      <div className={classes['remember']}>
+    <div className={classes.options}>
+      <div className={classes.remember}>
         <Checkbox
           name='remember'
           value='remember'
           label='Remember'
           labelStyle={{ fontSize: '.8rem' }}
         />
       </div>
-      <Link className={classes['recover']} to='/recover'>
+      <Link className={classes.recover} to={RECOVER_PATH}>
         Forgot Password?
       </Link>
     </div>
@@ -62,6 +58,5 @@ LoginForm.propTypes = {
 }
 
 export default reduxForm({
-  form: 'Login',
-  validate
+  form: LOGIN_FORM_NAME
 })(LoginForm)

examples/complete/material/src/routes/Login/containers/LoginContainer.js

@@ -42,7 +42,7 @@ export default class Signup extends Component {
       snackCanOpen: true
     })
 
-    this.props.firebase.login(loginData)
+    return this.props.firebase.login(loginData)
   }
 
   providerLogin = (provider) =>