Skip to content

Commit

Permalink
v2.2.5 (#592)
Browse files Browse the repository at this point in the history
* feat(HOCs): add error if using `react-redux@^6` (points to [v3 migration guide](http://docs.react-redux-firebase.com/history/v3.0.0/docs/v3-migration-guide.html)) - #591
* fix(docs): update react-native section of docs including broken links - #586
  • Loading branch information
prescottprue committed Dec 17, 2018
1 parent 83be2f4 commit fb6c255
Show file tree
Hide file tree
Showing 8 changed files with 97 additions and 80 deletions.
43 changes: 13 additions & 30 deletions docs/integrations/react-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,22 @@ 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.

## JS/Web

Setup and use `react-redux-firebase` as normal (described in the [use section of the README](https://github.com/prescottprue/react-redux-firebase#use)). Since Firebase is initialized outside of react-redux-firebase, the automatic handling of react-native done by Firebase works.

[react-native complete example app](https://github.com/prescottprue/react-redux-firebase/tree/master/examples/complete/react-native)

**NOTES**

* Only works for versions `v2.0.0` and higher. For older versions please view the docs associated with previous version.
* Will not perform as well as using native modules since the render thread is used for all JS

## 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. Follow [use instructions in README](https://github.com/prescottprue/react-redux-firebase#use)
1. When creating redux store pass `react-native-firebase` App instance into `reactReduxFirebase` when creating store:

**createStore.js**
Expand Down Expand Up @@ -48,40 +59,12 @@ Passing in an instance also allows for libraries with similar APIs (such as [`re

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/master/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.

[react-native complete example app](/examples/complete/react-native)

Instantiate a Firebase instance outside of `react-redux-firebase` then pass it in as the first argument like so:

**NOTE**: If you are looking to use native modules (`react-native-firebase` or other), [visit the `v2.0.0` docs](http://docs.react-redux-firebase.com/history/v2.0.0/docs/recipes/react-native.html#native-modules)

## 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. 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

## 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`
Expand Down
98 changes: 49 additions & 49 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-redux-firebase",
"version": "2.2.4",
"version": "2.2.5",
"description": "Redux integration for Firebase. Comes with a Higher Order Components for use with React.",
"main": "lib/index.js",
"module": "es/index.js",
Expand Down
10 changes: 10 additions & 0 deletions src/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,16 @@ export const supportedAuthProviders = [
*/
export const topLevelPaths = ['auth', 'profile', 'ordered', 'data']

/**
* @constant
* @description Error message shown if runnning react-redux v6 with a v2.0.0 version
* of react-redux-firebase
* @type {String}
* @private
*/
export const v3ErrorMessage =
'Context from react-redux not found. If you are using react-redux v6 a v3.*.* version of react-redux-firebase is required. Please checkout the v3 migration guide: http://bit.ly/2SRNdiO'

export default {
actionTypes,
defaultConfig
Expand Down
6 changes: 6 additions & 0 deletions src/firebaseConnect.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { isEqual, differenceWith } from 'lodash'
import hoistStatics from 'hoist-non-react-statics'
import { watchEvents, unWatchEvents } from './actions/query'
import { getEventsFromInput, createCallable, getDisplayName } from './utils'
import { v3ErrorMessage } from './constants'

/**
* @name createFirebaseConnect
Expand Down Expand Up @@ -39,6 +40,11 @@ export const createFirebaseConnect = (storeKey = 'store') => (
store = this.context[storeKey]

componentWillMount() {
// Throw if using with react-redux@^6
if (!this.context || !this.context[storeKey]) {
// Use react-redux-firebase@^3 for react-redux@^6 support. More info available in the migration guide: http://bit.ly/2SRNdiO'
throw new Error(v3ErrorMessage)
}
const { firebase, dispatch } = this.store

// Allow function to be passed
Expand Down
6 changes: 6 additions & 0 deletions src/firestoreConnect.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
import { isEqual, some, filter } from 'lodash'
import hoistStatics from 'hoist-non-react-statics'
import { createCallable, wrapDisplayName } from './utils'
import { v3ErrorMessage } from './constants'

/**
* @name createFirestoreConnect
Expand Down Expand Up @@ -40,6 +41,11 @@ export const createFirestoreConnect = (storeKey = 'store') => (
}

componentWillMount() {
// Throw if using with react-redux@^6
if (!this.context || !this.context[storeKey]) {
// Use react-redux-firebase@^3 for react-redux@^6 support. More info available in the migration guide: http://bit.ly/2SRNdiO'
throw new Error(v3ErrorMessage)
}
const { firestore } = this.store
if (this.firestoreIsEnabled) {
// Allow function to be passed
Expand Down
6 changes: 6 additions & 0 deletions src/withFirebase.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import hoistStatics from 'hoist-non-react-statics'
import { wrapDisplayName } from './utils'
import { v3ErrorMessage } from './constants'

/**
* @name createWithFirebase
Expand Down Expand Up @@ -35,6 +36,11 @@ export const createWithFirebase = (storeKey = 'store') => WrappedComponent => {
store = this.context[storeKey]

render() {
// Throw if using with react-redux@^6
if (!this.context || !this.context[storeKey]) {
// Use react-redux-firebase@^3 for react-redux@^6 support. More info available in the migration guide: http://bit.ly/2SRNdiO'
throw new Error(v3ErrorMessage)
}
return (
<WrappedComponent
{...this.props}
Expand Down
6 changes: 6 additions & 0 deletions src/withFirestore.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import hoistStatics from 'hoist-non-react-statics'
import { wrapDisplayName } from './utils'
import { v3ErrorMessage } from './constants'

/**
* @name createWithFirestore
Expand Down Expand Up @@ -34,6 +35,11 @@ export const createWithFirestore = (storeKey = 'store') => WrappedComponent => {
store = this.context[storeKey]

render() {
// Throw if using with react-redux@^6
if (!this.context || !this.context[storeKey]) {
// Use react-redux-firebase@^3 for react-redux@^6 support. More info available in the migration guide: http://bit.ly/2SRNdiO'
throw new Error(v3ErrorMessage)
}
return (
<WrappedComponent
{...this.props}
Expand Down

0 comments on commit fb6c255

Please sign in to comment.