CODEWITHSUNDEEP
androidfirebasereact-nativegoogle-cloud-firestore
McAuley
McAuley

Reputation: 99

React Native repeated timeouts writing collection to firestore@firebase/firestore: Firestore (8.4.2): Connection WebChannel transport errored

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('[email protected]', 'pass123')}
        title='test'
      />
      <StatusBar style="auto" />
    </View>
  );
}

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

Upvotes: 1

Views: 2589

Answers (3)

Lloyd Rajoo
Lloyd Rajoo

Reputation: 147

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

Upvotes: 1

McAuley
McAuley

Reputation: 99

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 });

Upvotes: 2

Greg Fenton
Greg Fenton

Reputation: 2808

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.

Upvotes: 0

Related Questions