1

I am trying to write a user to a firestore collection from a react native app. The user gets created in firebase fine under authentication but it then hangs on the firebase.firestore().collection('users').doc(uid).set('data').

After a few minutes I get a warning: "firestore@firebase/firestore: Firestore (8.4.2): Connection WebChannel transport errored"

I will continue getting this warning every few minutes and sometimes after 20 mins or so the collection might be written to firestore.

There are a few questions in the github and on SO with this issue but none have a fix. Any one come across this? My code

import '@firebase/auth';
import '@firebase/firestore';

const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxx",
    projectId: "xxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxx"
};

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export { firebase };


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { firebase } from '../src/firebase'

const handleSubmit = (email,password) => {
  console.log(email + password);
  firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((response) => {
          const uid = response.user.uid
          const data = {
              id: uid,
              email
          };
          const usersRef = firebase.firestore().collection('users')
          usersRef
              .doc(uid)
              .set(data)
              .then(() => {
                  console.log('please get here')
              })
              .catch((error) => {
                console.log('error get here')
              });
      })
      .catch((error) => {
        console.log('outer error get here ' + error)
  });
}

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        onPress={handleSubmit('f@d.com', 'pass123')}
        title='test'
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
McAuley
  • 99
  • 8

3 Answers3

2

So I asked this question on the firebase github, see: https://github.com/firebase/firebase-js-sdk/issues/4859

The solution they gave worked for me which was to add the below code when initializing firebase.

firebase.initializeApp(firebaseConfig);
firebase.firestore().settings({ experimentalForceLongPolling: true });
McAuley
  • 99
  • 8
1

In case it helps anyone, a more recent fix that worked for me was

import {initializeFirestore} from 'firebase/firestore'
const db = initializeFirestore(firebaseApp, {useFetchStreams: false})

Quoting the team: "The issue is caused by useFetchStreams being enabled by default, in the new modular build (v9). Since RN does not fully support fetch readable streams, projects have to fall back to XHR (which was the default in v8)."

They also say the fetch fix for RN should be released this week.

The thread is here: https://github.com/firebase/firebase-js-sdk/issues/5667

Lloyd Rajoo
  • 137
  • 2
  • 13
0

Your error message indicates that you are using Firebase SDK v8.4.2. However, that is newer than the current version supported by the Expo SDK.

When installing dependencies under expo, be sure to install them via expo install firebase and not npm install firebase.

To be sure you have the correct version installed right now, do:

  1. npm uninstall firebase
  2. expo install firebase

Then try running your app again.

Greg Fenton
  • 1,233
  • 9
  • 15
  • Thanks for the answer! However I am not using expo to develop the app, Just vanilla react native. – McAuley May 04 '21 at 09:11
  • import { StatusBar } from 'expo-status-bar'; – Greg Fenton May 04 '21 at 16:51
  • Apologies my code is a little misleading, I extracted the firebase code from a larger app I am developing and to speed up setting up the example I used create-react-native-app which added some expo code. The error occurs in both expo and vanilla react native. I actually got my answer on the github see: https://github.com/firebase/firebase-js-sdk/issues/4859 – McAuley May 04 '21 at 17:19
  • Thanks for the follow up! I don't know that I like the answer they provided you. What "proxy" do you think is at play in your environment? https://firebase.google.com/support/release-notes/js#cloud-firestore_72 – Greg Fenton May 05 '21 at 14:04