integration with react-native-web

[mannbonn]

[steps to reproduce]

1. Follow this https://medium.com/@aureliomerenda/create-a-native-web-app-with-react-native-web-419acac86b82
2. When the guide does say Remove react-native example components just paste this code to replace the whole ./src/App.js

import React from 'react';
import {View, Text} from 'react-native';

export default function App() {
  return(
      <View> <Text>{"Hello world"}</Text> </View>
  )
}

3. Keep following the guide.
   At the end of this steps alone, a webpage open and the react native code will be shown app in it. Neat.
4. install '@react-native-firebase/app' and '@react-native-firebase/auth'
5. add import auth from '@react-native-firebase/auth' to the App.js
6. run the web scripts again, watch it fail.

The console error message is completely bogus, as the file are in the place it says it could not find them.
chokidar complains of a file that can't be written in C:.
The browser console says Uncaught SyntaxError: expected expression, got '!'

I'm ready to add anything that could help pinpointing the problem, as to the top of my knowledge there is not much I can do. Sorry if the question is missing any information, but I'm just overflown by this problem.

[mikehardy]

We simply do not support react-native-web and no one has proposed themselves to step up to contribute the PRs such that we do support react-native-web (and most important!) to maintain it going forward.

What I do (using reactxp, which also supports web, similar to react-native-web) is that when I do the web build I cut react-native-firebase out completely and I pull in firebase-js-sdk directly from the google repos. No attempt to build react-native-firebase is made in my web build, because it doesn't work

With no intention at being discouraging but to set my personal boundaries clearly - I will make no attempt to support react-native-web here though I'd like to see it of course. We need someone from the community to step up and commit to maintaining it for it to happen

[cglacet]

Maybe this? customizing-webpack using aliases

[mikehardy]

That looks right on target

[cglacet]

By the way, I didn't answered earlier but your suggestion worked great for me (on a nextjs project).

[BoavistaLudwig]

So, apparently with Expo,
I only had to add shims files to mix Firebase Web SDK & React Native Firebase,
and I followed @mikehardy 's guidance with his demo app at https://github.com/invertase/react-native-firebase-authentication-example/tree/main/template/src/shims. :)

...problem solved 🥳, tackling the next ;-)

[vipulbhj]

@BoavistaLudwig Hello good sir, could you explain how you solved this ? I am also using expo and just saw it it now working on Web. I saw your above comment, but now sure of the exact steps needed for this ?

Can you share that maybe ?

[BoavistaLudwig]

@mikehardy working with shim files and your template,

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

import initializeApp from './firebase-init';
initializeApp();

const auth = firebase.auth;

// Want to do local development?
// Uncomment this and use `yarn test:emulator:start`
// auth().useEmulator('http://localhost:9099');

export default auth;

at https://github.com/invertase/react-native-firebase-authentication-example/blob/main/template/src/shims/firebase-auth-web.ts

how do you add

import {
  getReactNativePersistence,
  initializeAuth,
} from "firebase/auth/react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

to achieve

export const auth = initializeAuth(app, {
  persistence: getReactNativePersistence(AsyncStorage),
});

??

Because Expo SDK 48 doesn't come with Async Storage any more, authentication on React Native doesn't persist out of the box. I had to add these additional imports before I tackled the shim files scenario, and it worked.

Right now, I can't get my head around it when using shims. Web persistence already works out of the box...