Skip to content

Commit c960361

Browse files
authored
Version 1.4.0 Beta 4 (prescottprue#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 prescottprue#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
1 parent acd14f9 commit c960361

File tree

20 files changed

+343
-165
lines changed

20 files changed

+343
-165
lines changed

docs/api/compose.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,13 @@ Middleware that handles configuration (placed in redux's
2121
profile when logging in. (default: `false`)
2222
- `config.enableRedirectHandling` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to enable
2323
auth redirect handling listener. (default: `true`)
24+
- `config.onAuthStateChanged` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function run when auth state
25+
changes. Argument Pattern: `(authData, firebase, dispatch)`
26+
- `config.onRedirectResult` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function run when redirect
27+
result is returned. Argument Pattern: `(authData, firebase, dispatch)`
2428
- `config.profileFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying how user profile is saved.
25-
- `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
29+
- `config.uploadFileDataFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying
30+
how file meta data is written during file uploads
2631
- `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
2732
profile object to populate
2833
- `config.autoPopulateProfile` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to

docs/auth.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default firebaseConnect()(SomeComponent)
7979

8080

8181
##### Returns
82-
[**Promise**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) with authData in case of success or the error otherwise.
82+
[**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.
8383

8484
##### Examples
8585

docs/recipes/react-native.md

Lines changed: 141 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,47 @@
1414
1. Place the client id into `iosClientId` variable within the example
1515

1616

17-
## Example App Snippet
17+
## Example App Snippets
1818

1919
This snippet is a condensed version of [react-native complete example](/examples/complete/react-native).
2020

21+
**store.js**
22+
```js
23+
import { createStore, compose } from 'redux'
24+
import rootReducer from './reducer'
25+
import { firebase as fbConfig } from './config'
26+
import { reactReduxFirebase } from 'react-redux-firebase'
27+
import { AsyncStorage } from 'react-native'
28+
29+
export default function configureStore (initialState, history) {
30+
// use compose to make a function that will create store
31+
const createStoreWithMiddleware = compose(
32+
reactReduxFirebase(fbConfig,
33+
{
34+
userProfile: 'users',
35+
enableLogging: false,
36+
ReactNative: { AsyncStorage },
37+
}
38+
)
39+
)(createStore)
40+
41+
// create store
42+
const store = createStoreWithMiddleware(rootReducer)
43+
44+
// Enable Webpack hot module replacement for reducers
45+
if (module.hot) {
46+
module.hot.accept('./reducer', () => {
47+
const nextRootReducer = require('./reducer')
48+
store.replaceReducer(nextRootReducer)
49+
})
50+
}
51+
52+
return store
53+
}
54+
```
55+
56+
**App.js**:
57+
2158
```js
2259
import React, { Component } from 'react'
2360
import { GoogleSignin, GoogleSigninButton } from 'react-native-google-signin'
@@ -143,3 +180,106 @@ export default class GoogleSigninSampleApp extends Component {
143180
AppRegistry.registerComponent('GoogleSigninSampleApp', () => GoogleSigninSampleApp)
144181

145182
```
183+
184+
185+
## Creating Your Own
186+
187+
We are going to use the project name Devshare for example here. For your project, use your project name everywhere where Devshare is used.
188+
189+
### Start
190+
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`.
191+
1. Run `create-react-native-app Devshare` (again replace Devshare with the name of your project)
192+
1. After that is complete, eject using `yarn eject` or `npm run eject`
193+
194+
### Download Firebase Config
195+
1. Download `GoogleService-Info.plist` file from Firebase
196+
1. Visit Over page and click Add Firebase to iOS
197+
198+
![img](/docs/static/FirebaseOverview.png)
199+
200+
1. Fill in application info in register modal and click register
201+
202+
![img](/docs/static/RegisterApp.png)
203+
204+
1. Download the .plist file and place it in your `ios` folder
205+
206+
![img](/docs/static/PlistDownload.png)
207+
208+
### Add `react-native-google-signin`
209+
210+
1. Add [`react-native-google-signin`](https://github.com/devfd/react-native-google-signin) to the project
211+
1. Run `npm i --save react-native-google-signin` to include it within JS dependencies
212+
1. Download the [`react-native-google-signin`](https://github.com/devfd/react-native-google-signin) zip, and unzip it
213+
1. Drag and drop the `ios/GoogleSdk` folder to your xcode project. (Make sure `Copy items if needed` **IS** ticked)
214+
1. Add RNGoogleSignin to project build phase
215+
1. Click Name in sidebar of Xcode
216+
217+
![img](/docs/static/BuildPhase.png)
218+
219+
1. In your project build phase -> `Link binary with libraries` step, add:
220+
* `libRNGoogleSignin.a`
221+
* `AddressBook.framework`
222+
* `SafariServices.framework`
223+
* `SystemConfiguration.framework`
224+
* `libz.tbd`
225+
226+
**Note:** (May take clicking "Add Other" button then selecting the `GoogleSdk` folder and `RNGoogleSignin` folder)
227+
228+
1. Make sure all dependencies are correctly linked to your project:
229+
[![link config](https://github.com/apptailor/react-native-google-signin/raw/master/img/link-config.png)](#config)
230+
231+
1. Configure URL types in the ```Info``` panel of your xcode project
232+
1. add a URL with scheme set to your ```REVERSED_CLIENT_ID``` (found inside the plist)
233+
1. add a URL with scheme set to your ```bundle id```
234+
235+
![img](/docs/static/UrlTypes.png)
236+
237+
1. Make sure you import `RNGoogleSignin.h` in your `AppDelegate.m` like so:
238+
239+
```objc
240+
// add this line before @implementation AppDelegate
241+
#import <RNGoogleSignin/RNGoogleSignin.h>
242+
243+
// add this method before @end
244+
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
245+
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
246+
247+
return [RNGoogleSignin application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
248+
}
249+
250+
```
251+
252+
At the end of this step, your Xcode config should look similar to this:
253+
254+
[![xcode config](https://github.com/apptailor/react-native-google-signin/raw/master/img/url-config.png)](#config)
255+
256+
### Set Open URLs
257+
258+
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:
259+
260+
**AppDelegate.m:**
261+
262+
```objc
263+
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
264+
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
265+
266+
return [[FBSDKApplicationDelegate sharedInstance] application:application
267+
openURL:url
268+
sourceApplication:sourceApplication
269+
annotation:annotation
270+
]
271+
|| [RNGoogleSignin application:application
272+
openURL:url
273+
sourceApplication:sourceApplication
274+
annotation:annotation
275+
];
276+
}
277+
```
278+
279+
### Run It
280+
281+
Now, if everything was done correctly you should be able to do the following:
282+
283+
```bash
284+
react-native run-ios
285+
```

docs/static/BuildPhase.png

147 KB
Loading

docs/static/FirebaseOverview.png

442 KB
Loading

docs/static/PlistDownload.png

268 KB
Loading

docs/static/RegisterApp.png

133 KB
Loading

docs/static/UrlTypes.png

199 KB
Loading

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
export const ACCOUNT_FORM_NAME = 'account'
2+
export const LOGIN_FORM_NAME = 'login'
3+
export const SIGNUP_FORM_NAME = 'signup'
24
export const RECOVER_CODE_FORM_NAME = 'recoverCode'
35
export const RECOVER_EMAIL_FORM_NAME = 'recoverEmail'
46

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Paper from 'material-ui/Paper'
33
import { connect } from 'react-redux'
44
import { reduxForm } from 'redux-form'
55
import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
6-
import { submit } from 'redux-form'
76
import { reduxFirebase as rfConfig } from 'config'
87
import { ACCOUNT_FORM_NAME } from 'constants/formNames'
98
import { UserIsAuthenticated } from 'utils/router'
@@ -19,11 +18,7 @@ import classes from './AccountContainer.scss'
1918
({ firebase }) => ({
2019
auth: pathToJS(firebase, 'auth'),
2120
account: pathToJS(firebase, 'profile'),
22-
}),
23-
{
24-
// action for submitting redux-form
25-
submitForm: () => (dispatch) => dispatch(submit(ACCOUNT_FORM_NAME))
26-
}
21+
})
2722
)
2823
export default class Account extends Component {
2924
static propTypes = {
@@ -38,7 +33,7 @@ export default class Account extends Component {
3833
state = { modalOpen: false }
3934

4035
handleLogout = () => {
41-
this.props.firebase.logout()
36+
return this.props.firebase.logout()
4237
}
4338

4439
toggleModal = () => {
@@ -57,7 +52,7 @@ export default class Account extends Component {
5752
}
5853

5954
render () {
60-
const { account, submitForm } = this.props
55+
const { account } = this.props
6156

6257
if (!isLoaded(account)) {
6358
return <LoadingSpinner />
@@ -77,7 +72,6 @@ export default class Account extends Component {
7772
<div className={classes.meta}>
7873
<AccountForm
7974
account={account}
80-
submitForm={submitForm}
8175
onSubmit={this.updateAccount}
8276
/>
8377
</div>
@@ -87,4 +81,3 @@ export default class Account extends Component {
8781
)
8882
}
8983
}
90-
0

0 commit comments

Comments
 (0)