React-redux-firebase: feat(react-native): support/example react-native-firebase

[ajostergaard]

Not exactly a seasoned hand at Redux, React Native or Firebase but have settled on react-native-firebase as being by a long way the best way to integrate Firebase with React Native. On top of that the case this repo makes around state management is compelling. :)

Hence, any chance of explicit support for react-native-firebase? In lieu of that I'd really appreciate any thoughts on, or example of, how one might go about using react-native-firebase instead of firebase direct?

[prescottprue]

JS React-Native Support

If you are using a v1.4.0-beta.4 or higher, you should be able to use react-redux-firebase with react-native (v.1.4.0-rc.2 or newest suggested).

The v1.4.0 branch currently contains all v1.4.0 progress (since it is still in pre-release). Here are some useful links:

• docs outlining usage
• complete react-native app example

Native Firebase Modules

There have been some users that said they would prefer to use the native firebase modules under the hood instead of firebase's JS library (what react-redux-firebase uses normally).

react-native-firebase apparently attempts to preserve the JS API, while using the native Firebase modules. I have begun talks with the guys making react-native-firebase, and it seems like future versions of react-redux-firebase could potentially support passing in an instance of react-native-firebase.

[prescottprue]

For most, the JS support, which is already available in v1.4.0-rc.2 should suffice.

For those who would like to use Native Firebase Modules instead of the JS library, support for passing an instance of react-native-firebase has been added to the roadmap.

[ajostergaard]

Nice - thanks!

Just to make the case for react-native-firebase - it is more performant as it significantly reduces load on the React Native JavaScript thread so makes it more likely your animations will be smooth and as it uses the native Firebase Database SDKs you get all the features only they support, e.g. offline and background sync.

IMCO there is no other way to do it. :)

[prescottprue]

v2.0.0-alpha was released and allows for passing in a Firebase instance, which means react-native-firebase should be able to be passed in.

Have yet to test, so I am going to leave this open until it can be confirmed.

[thinq4yourself]

This is excellent, being that we are using react-native-firebase but am having difficulty integrating Redux on a pattern that makes sense. Initially I built a wrapper for Firebase, but Redux seems like a more performant route for us regardless of data store. This work brings us closer, I am, however, a bit hesitant since it is alpha and I don't know the timing on v2 release, and this line still perplexes me:

_... allows react-native-firebase to be passed (for using native modules instead of JS within react-native)_

Is there an example [or thought] you could share of what you mean by this?

[prescottprue]

@thinq4yourself Here are the docs for doing it with v2.0.0. The timing will actually have to do with more people using it quickly.

v2.0.0-beta will most likely be out today or tomorrow (which passes the tests from v1, and more are being added), so it is moving pretty quick towards stability.

[thinq4yourself]

Ooops! Seemed to have missed those, thank you!!! 💥 Done and done!

[thinq4yourself]

From what I can tell, you're keeping v2.0.0 up to date with alpha and beta branches, so safe to use v2.0.0 branch for now in projects?

Thanks for your responses and work.

[prescottprue]

@thinq4yourself I am keeping v2.0.0 updates on the v2.0.0 branch and released on npm with the @canary tag (can be used for installing or in your package file). The Alpha tag was used initially, but some user's expressed confusion (since 1.5.0 is also in alpha).

Changes for v1.5.0-* pre-releases will be on @next until it is stable and released. If v2.0.0 is still in pre-release at that point, @next will become v2.

[jsslai]

I get a crash when react-redux-firebase tries to call firebase.auth().getRedirectResult().

https://github.com/prescottprue/react-redux-firebase/blob/v2.0.0/src/actions/auth.js#L203

I guess that's not available in react-native-firebase. As a workaround I had to explicitly disable enableRedirectHandling in react-redux-firebase config.

{
   enableRedirectHandling: false
}

react-redux-firebase 2.0.0-beta
react-native-firebase 2.0.2

[prescottprue]

@jsslai Thanks for reporting. That is a known issue with v2.0.0-beta and v2.0.0-beta.2 will include defaulting enableRedirectHandling to false.

[thinq4yourself]

Hi @prescottprue - As far as the docs for using react-native-firebase, I don't see the following constant being used:

const firebase = RNFirebase.initializeApp(configurationOptions);

When you create the store, you're just using RNFirebase:

const store = createStore(
  reducer,
  undefined,
  compose(
   reactReduxFirebase(RNFirebase, reduxConfig), 
   applyMiddleware(...middleware)
 )
)

Also, I'm just assuming that you're naming reduxConfig here but it's just not shown as to what it is. Again, I'm assuming it would be something like this:

const reduxConfig = {
  enableLogging: false,
  userProfile: 'users', 
  ...
}

---

---

So, would this be more accurate, or do I misunderstand something?

```

export const fbConfig = {
debug: __DEV__ ? '*' : false,
persistence: true,
apiKey: '1234567890',
...
}

export const reduxConfig = {
enableLogging: false,
userProfile: 'users',
updateProfileOnLogin: false,
...
}

const firebase = RNFirebase.initializeApp(fbConfig)

const store = createAppropriateStore(rootReducer, reactReduxFirebase(firebase, reduxConfig), compose(...enhancers)) // pass in react-native-firebase instance instead of config,

[prescottprue]

@thinq4yourself Yes that would be more clear, and I will update the example accordingly.

[prescottprue]

Examples have been updated. And there are quite a few people following this pattern and having it work as expected.