Sharing Cloud Firestore methods between Web and ReactNative

[mschmid]

Hi,

I did not found an answer to this yet, so hopefully somebody can point me into the right direction.

I already implemented several functions using Cloud Firestore (v8 and now migrated to v9), which I use in a ReactJS WebApp.

To be able to re-use them with minimal effort in my ReactNative App, I was planning to put these methods to a separate repository, import them in my WebApp (works fine) and also import and use them in my ReactNative app.

API seems similar enough at least do add, update and delete docs, so I gave it a try.

Separate deleteDoc.js file:

export default const deleteDoc = (db, id) => {
    return db.collection('myCollection').doc(id).delete()
}

ReactNative Project:

import firestore from '@react-native-firebase/firestore'
import deleteDoc from './deleteDoc'

const id = "123"
deleteDoc(firebase(), id)

However, this gives me FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore.
In the WebApp, it works as expected.

Is there an elegant way to share firestore-related code between Web and ReactNative? Thanks in advance!

[mikehardy]

There is but it's still v8 API, using firebase-js-sdk in compat mode until the API here moves to v9 style
I happen to have a runnable example for you (though the pre-built web app has a react-navigation pathing issue as deployed to github.io it works on localhost: https://github.com/invertase/react-native-firebase-authentication-example)
Specifically this, if done literally exactly the same for firestore as I did it for analytics will work (I know, I'm using it in two work projects):

https://github.com/invertase/react-native-firebase-authentication-example/blob/main/template/src/shims/firebase-analytics-web.ts
https://github.com/invertase/react-native-firebase-authentication-example/blob/8b7074ae53c4eefb129476ee4631d174c7441b2e/template/craco.config.js#L108

That template is built on this one https://github.com/plaut-ro/luna

And is my best take on sharing code (literally, just all same code base with one API) on web + mobile

[mschmid]

Thanks @mikehardy for the fast reply! I will try out and come back to this thread.

[GoDeepBlue]

Is the https://github.com/invertase/react-native-firebase-authentication-example approach still the best method for using RNFirebase and React-native-web?

I have a RN project running with RN 0.701, React-navigation, react-native-web, webpack and several packages up and running on metro.

[mikehardy]

Yes - I have several work projects based off it, and while I'm not committing to offer support for that (as noted in the README there), it's something I personally use, and I make sure react-native-firebase works with that style + however it evolves will be the best supported thing (vague, but still has some meaning...) as I do need it for work

At the same time, the "big idea" in that package is that 1) react-native-firebase does it's best to mirror the firebase-js-sdk v8 API so the APIs are compatible then 2) using shims to load the correct package so the API space has the right implementation under it

...and that's something possible via multiple pathways, so, anything that works.

[GoDeepBlue]

Got it, makes sense! Appreciate the quick response and all your efforts !

[mikehardy]

react-native-firebase has firebase-js-sdk fallback support now so it should work on web, no shims needed:

https://rnfirebase.io/platforms#other-platforms