[📚] Document regarding OTHER PLATFORMS is super confusing

[vipulbhj]

Documentation Feedback

In the documentation it says that on other platforms, it just falls back to Web SDK, but I am so confused.

Where would the SDK even look for / find the firebase config ?

How to use this for web ?

Does anyone have any examples or something?

---

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[MartinN3]

I tried to use it for web and ended with #8063 and goal is to lately migrate from those shims to modular approach so this is temporary solution but very similar to what endgame might look like so there won't be much refactoring.

[github-actions]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

[russellwheatley]

Hi @vipulbhj - at the moment, we're going through a large refactor, and at the end of it, we will be updating our documentation. To initialise the web SDK you would do it the normal way it occurs in the firebase-js-sdk.

See: https://github.com/invertase/react-native-firebase/blob/main/packages/app/e2e/app.e2e.js#L105-L115

This is how we initialise for our "other" test platform for macOS: https://github.com/invertase/react-native-firebase/blob/main/tests/globals.js#L358

[vipulbhj]

When used with expo, running bundle just fails, might be worth trying once. There are a bunch of open issues already, which have documented more specifics on this.

P.S: Thank you for the update, I will keep an eye out for the update on documentation.

[mikehardy]

@vipulbhj can you please be specific? (i.e, philosophically following https://stackoverflow.com/help/how-to-ask - exact versions, exact commands run, exact output, as text, for example). Additionally "bunch of open issues already" - I'm not aware of those 🤔 and I watch notification traffic on this repository. So I assume I've missed something, could you please specifically link to the open issues you feel are related?

[vipulbhj]

Maybe I am confused and saw it somewhere else, maybe it was a discussion and not an issue, but with out current app, expo 51.x.x, we are using the react-native-firebase@latest and it's web version doesn't work.

npx expo start --web fails, I will report back the exact error in sometime. For now, we used shims for auth, firestore and storage, but we had issues with storage in that also, but I think that was something to do with how the module is implemented.

Could also be a skill issue on my end.

[mikehardy]

I tried this as I'm experimenting multi-platform a little with expo at the moment and I was curious.

I did a npx create-expo-app RNFBTestApp && cd RNFBTestApp && npm run web and it loads the test app like you would expect

I added all the packages listed as possible on "other" platform via npm add: app, app-check, auth, analytics, firebase, functions, remote-config, storage.

I stopped the bundler with ctrl-c and re-ran with npm run web again, worked fine.

I opened app/(tabs)/index.tsx and I added this to the top part (you'll have to use your own config though)

import { useEffect } from "react";
import { getApp, initializeApp } from "@react-native-firebase/app";
import {
  fetchAndActivate,
  getAll,
  getRemoteConfig,
} from "@react-native-firebase/remote-config";

const firebaseConfig = {
  clientId: "your values here",
  appId: "your values here",
  authDomain: "your values here",
  databaseURL:"your values here",
  projectId: "your values here",
  storageBucket:"your values here",
  messagingSenderId:"your values here",
  gaTrackingId: "your values here",
};


if (Platform.OS === "web") {
  initializeApp(firebaseConfig);
}
const firebaseApp = getApp();
console.log("firebase app is: " + JSON.stringify(firebaseApp));

I re-loaded the app, and I see (via F12 in browser and switching to console of dev tools) that I have a firebaseapp

I added this to the HomeScreen function to make sure I wasn't deluding myself

  useEffect(() => {
    fetchAndActivate(getRemoteConfig())
      .then((config) => {
        console.log(
          "remoteConfig fetched and activated how? " + JSON.stringify(config)
        );
        console.log(
          "remoteConfig getAll: " + JSON.stringify(getAll(getRemoteConfig()))
        );
      })
      .catch((e) => {
        console.log("remoteConfig failure? ", e);
      });
  }, []);

And now when I reload I see the config parameters.

As far as I can tell, this is all working, with expo npm run web (which is expo start --web in package.json)

So we'll need some really specific reproduction steps, as it appears to be working for me ?

I'm very very new to expo though, I could be missing something

[vipulbhj]

Hey @mikehardy, we setup react-native-firebase for our project to run native android and ios builds using https://rnfirebase.io/#your-expo-project.

If you notice this section of the documentation, we have setup Google Service files for both platforms, which was my initial question, as when you do that, we don't need to do any inits or anything like that.

And that's the reason I had opened this issue initially.

P.S: The findings of your experiment seem interesting, I will try this tonight with our app. I am still not sure which is the correct place to do the initialisation, but I will try to figure something out.

[vipulbhj]

Also, can you trying importing something from storage and see if that works ?

[mikehardy]

After some testing and looking at the way I was doing it in other platforms I simplified the web/other platform init much further. initializeApp may be called as many times as you like so there is no reason to guard it and getApp() will always work after initializeApp so it's just:

if (Platform.OS === "web") {
  initializeApp(firebaseConfig);
}
const firebaseApp = getApp();

I created docs PR #8151 to improve the "other" (and "web") platform install experience, the docs there were lacking.

How does this look?

https://react-native-firebase-hpuitelym-invertase.vercel.app/#other--web

I tested using storage in a similar exercise to remote-config, it appeared to work fine, I listed items from a known-good bucket, all showed up in console.log

import { getStorage, listAll, ref } from "@react-native-firebase/storage";

  // later, inside some function showing a screen just for demonstration
  useEffect(() => {
    // demonstrate using storage using a path with read allowed in this project
    listAll(ref(getStorage(), "/playground"))
      .then((listResult) => {
        listResult.items.forEach((item) => {
          console.log("storage listAll found: " + item.fullPath);
        });
      })
      .catch((e) => {
        console.log("storage failure? ", e);
      });
  }, []);

So I believe everything is working, and I hope that PR clears up the install confusion so people can start using the web platform fallback more easily for true multi-platform react-native-firebase

[vipulbhj]

Let me try this in my app and report back

[vipulbhj]

I tried this in my app.

I have a file auth.tsx which imports import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';

I started the local server and tried to run the app and got

Logs for your project will appear below. Press Ctrl+C to exit.
Web Bundling failed 914ms node_modules/expo-router/entry.js (2260 modules)
Unable to resolve "../shims/firebase-auth-web.ts" from "context/auth.tsx"

Nothing on my machine is names that,

I am using

    "@react-native-firebase/app": "^21.2.0",
    "@react-native-firebase/auth": "^21.2.0",
    "@react-native-firebase/firestore": "^21.2.0",
    "@react-native-firebase/storage": "^21.2.0",

[mikehardy]

Okay, near as I can tell with the doc updated and functionality all working for me with everything I test, this should be handled now. Hopefully not super confusing any more :-)

The error you just posted looks project specific. I saw you comment in another "react-native-firebase multiplatform" issue (discussion perhaps?) which was from the era before we had web-fallback implemented here.

In that discussion you needed to have shims and you needed to configure them in the babel config that was loaded for web. I imagine you still have a config setup like that when it should be removed. Or perhaps you have already removed it but you still have it in your config?

outdated: #4417 (comment)
unnecessary I think: #8063 (comment)

I've just responded to the various discussions I could see where "shims" were mentioned as I don't believe any shims are necessary anywhere anymore.

Just an initializeApp call using your firebase web app config if Platform.OS === "web"

So I'm going to close this - I don't believe there's anymore to do with docs updated and no issues reproduced