New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react-native): support/example react-native-firebase #131

Closed
ajostergaard opened this Issue May 14, 2017 · 14 comments

Comments

Projects
None yet
4 participants
@ajostergaard

ajostergaard commented May 14, 2017

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

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue May 15, 2017

Owner

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:

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.

Owner

prescottprue commented May 15, 2017

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:

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

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue May 16, 2017

Owner

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.

Owner

prescottprue commented May 16, 2017

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.

@prescottprue prescottprue self-assigned this May 16, 2017

@ajostergaard

This comment has been minimized.

Show comment
Hide comment
@ajostergaard

ajostergaard May 16, 2017

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. :)

ajostergaard commented May 16, 2017

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 prescottprue changed the title from Feature Request: support/example react-native-firebase to feat(react-native): support/example react-native-firebase May 16, 2017

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Jun 21, 2017

Owner

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.

Owner

prescottprue commented Jun 21, 2017

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.

prescottprue added a commit that referenced this issue Jun 27, 2017

Drop support for passing a Firebase instance.
* Firebase is no longer a dependency (build size, native compatibility,
bundling for boilerplates, etc.) - #173, #131, #107
* Migration guide updated
* Roadmap updated with v2.0.0 and v1.5.0 info
@thinq4yourself

This comment has been minimized.

Show comment
Hide comment
@thinq4yourself

thinq4yourself Jun 29, 2017

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?

thinq4yourself commented Jun 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Jun 29, 2017

Owner

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

Owner

prescottprue commented Jun 29, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@thinq4yourself

thinq4yourself Jun 29, 2017

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

thinq4yourself commented Jun 29, 2017

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

@thinq4yourself

This comment has been minimized.

Show comment
Hide comment
@thinq4yourself

thinq4yourself Jun 29, 2017

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.

thinq4yourself commented Jun 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Jun 29, 2017

Owner

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

Owner

prescottprue commented Jun 29, 2017

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

@prescottprue prescottprue added this to the v2.0.0 milestone Jun 30, 2017

@prescottprue prescottprue referenced this issue Jul 3, 2017

Merged

Version v2.0.0 Beta #182

6 of 6 tasks complete

prescottprue added a commit that referenced this issue Jul 4, 2017

Version v2.0.0 Beta (#182)
### Features
* [X] Keeping data on logout - #125
* [X] Listeners now kept on state (follows byId/allIds pattern [from redux docs](http://redux.js.org/docs/recipes/reducers/UpdatingNormalizedData.html))
* [X] `ordered` reducer added for managing ordered state (`SET_ORDERED` no longer used)
* [X] `populate` works for profile (needed to remove share population logic)
* [X] Presence capability added to show currently logged in users and track user sessions (`presence` in config)
* [X]  Firebase is no longer a dependency (build size, native compatibility, bundling for boilerplates, etc.) - #173, #131, #107


### Fixes/Enhancements
* Drop support for passing Firebase instance
* Auto profile population removed (profile population will require using populate)
* `isLoaded` and `isEmpty` logic simplified
* Tests passing with new syntax (including reducers)
* Drop support and deprecation warning for `profileDecorator` (use `profileFactory`)
* Drop support and deprecation warning for `distpatchOnUnsetListener` (use `distpatchOnUnsetListener`, note incorrect spelling)
* Tests no longer skipped from linting
* Tons of other code simplifications
@jsslai

This comment has been minimized.

Show comment
Hide comment
@jsslai

jsslai Jul 7, 2017

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

jsslai commented Jul 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Jul 7, 2017

Owner

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

Owner

prescottprue commented Jul 7, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@thinq4yourself

thinq4yourself Jul 10, 2017

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,

thinq4yourself commented Jul 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Jul 10, 2017

Owner

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

Owner

prescottprue commented Jul 10, 2017

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

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Aug 6, 2017

Owner

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

Owner

prescottprue commented Aug 6, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment