|
14 | 14 | 1. Place the client id into `iosClientId` variable within the example
|
15 | 15 |
|
16 | 16 |
|
17 |
| -## Example App Snippet |
| 17 | +## Example App Snippets |
18 | 18 |
|
19 | 19 | This snippet is a condensed version of [react-native complete example](/examples/complete/react-native).
|
20 | 20 |
|
| 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 | + |
21 | 58 | ```js
|
22 | 59 | import React, { Component } from 'react'
|
23 | 60 | import { GoogleSignin, GoogleSigninButton } from 'react-native-google-signin'
|
@@ -143,3 +180,106 @@ export default class GoogleSigninSampleApp extends Component {
|
143 | 180 | AppRegistry.registerComponent('GoogleSigninSampleApp', () => GoogleSigninSampleApp)
|
144 | 181 |
|
145 | 182 | ```
|
| 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 | +  |
| 199 | + |
| 200 | + 1. Fill in application info in register modal and click register |
| 201 | + |
| 202 | +  |
| 203 | + |
| 204 | + 1. Download the .plist file and place it in your `ios` folder |
| 205 | + |
| 206 | +  |
| 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 | +  |
| 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 | + [](#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 | +  |
| 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 | +[](#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 | +``` |
0 commit comments