Error Cloud Firestore addEventListener is not a function #react-native #firestore

Question

I have problems and errors when using cloud firestore That error appears when I type var db = firebaseApp.firestore ()

Image depicting errors

import React, { Component } from 'react'
import { StyleSheet, View, Dimensions, Image, Text, SafeAreaView, 
ScrollView, FlatList, Modal, TextInput, TouchableOpacity } from 'react- 
native';
import { firebaseAppKeep } from '../../constant/configFireBase'


import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'


import TaskList from '../../components/TaskList'
import TaskForm from '../../components/TaskForm'
import HeaderBar from '../../components/HeaderBar'

const WIDTH = Dimensions.get('window').width
const HEIGHT = Dimensions.get('window').height
const sizeIconAdd = 60

export default class TaskHome extends Component {
  constructor(props) {
super(props);
this.state = {
  statusModal: false,
  taskList: []
}
      }
  OpenModalTaskControl = () => {
    this.setState({
      statusModal: !this.state.statusModal
    })
  }
  getDayCreated = () => {
var date = new Date().getDate(); //Current Date
var month = new Date().getMonth() + 1; //Current Month
var year = new Date().getFullYear(); //Current Year
date = date + '/' + month + '/' + year
return date
  }
  getTimeCreate = () => {
var hours = new Date().getHours(); //Current Hours
var min = new Date().getMinutes(); //Current Minutes
var sec = new Date().getSeconds(); //Current Seconds
hours = hours + ':' + min + ':' + sec
return hours
  }
      s4() {
    return Math.floor((1 + Math.random()) *     0x10000).toString(16).substring(1)
  }
  genarateID() {
    return this.s4() + this.s4() + '-' + this.s4() + this.s4() + '-' +             this.s4() + this.s4() + '-' + this.s4() + this.s4();
  }

  addTask = (task) => {
task.id = this.genarateID()
task.dayCreated = this.getDayCreated()
task.timeCreated = this.getTimeCreate()
console.log(task)

var user = firebaseAppKeep.auth().currentUser
var db = firebaseAppKeep.firestore()
if (user) {
  console.log(user.email, user.uid)
  db.collection(user.uid)
    .add({
      colorTask: task.colorTask,
      dayCreated: task.dayCreated,
      id: task.id,
      status: task.status,
      taskDetail: task.taskDetail,
      timeCreated: task.timeCreated,
      titleTask: task.titleTask
    })
    }
    this.state.taskList.push(task)
      }
  SignOut = () => {
    firebaseAppKeep.auth().signOut()
  .then(() => {
    this.props.navigation.navigate('AuthRoutes')
  })
  .catch(error => console.log(error));
  }
  render() {
    var { statusModal } = this.state
    var showBtnAddTask = statusModal === false ?
      <View style={{ position: 'absolute', left: WIDTH - sizeIconAdd - 10, vtop: HEIGHT - sizeIconAdd - 20 }}>
    <TouchableOpacity onPress={() => this.OpenModalTaskControl()}>
      <FontAwesome5 name={"plus"} size={sizeIconAdd} color={"black"} />
    </TouchableOpacity>
  </View>
  : null
return (
  <SafeAreaView>
    <HeaderBar opacity={this.state.statusModal} signout={this.SignOut} />

    <View style={{ marginHorizontal: 10, alignItems: 'center', opacity: this.state.statusModal === true ? 0.1 : 1 }}>
      <TaskList taskList={this.state.taskList} />
    </View>

    <TaskForm
      statusModal={this.state.statusModal}
      changeStatusModal={this.OpenModalTaskControl}
      addTask={this.addTask}
    />
    {showBtnAddTask}
  </SafeAreaView>
);
}
}

error { TypeError :e.addEventListener is not a function. (In 'e.addEventListener ("visibilitychange",this.ah)','e.addEventListener ' is undefined) }

Hope to be of your help

Answer 1

I am using Expo. I fixed it by running expo install firebase. It installed version 7.9.0 and now the warning is gone.

Answer 2

It is due to firebase-js using an event listener on window, which does not exist in RN. Mock it by insert this line at the top level of your app.

window.addEventListener = x => x;

Answer 3

Had the same issue. Only way I got it working was to drop to "firebase": "^6.6.2"

Answer 4

I found the solution by doing the following steps: 1. Reinstalled Firebase in version 7.14.0 2. I installed the base-64 3. Add the following code to me app.js

 import {decode, encode} from 'base-64'

 if (! global.btoa) {global.btoa = encode}

 if (! global.atob) {global.atob = decode}

It worked, but it still felt like some warnings to me.

Please edit the question tags by adding firebase and firebase-firestore for the firebase team to see the problem.

Answer 5

After multiple tries, it works when i add this line :

window.addEventListener = (x) => x;

before import and declaration of firebase, same this :

firebase.js

window.addEventListener = (x) => x;

import * as firebase from "firebase";

const firebaseConfig = {
apiKey: "myAPIkEy",
authDomain: "myapp.firebaseapp.com",
databaseURL: "https://myapp.firebaseio.com",
projectId: "myapp",
storageBucket: "myapp.appspot.com",
messagingSenderId: "00000000",
appId: "1:000000000:web:0000000000459",
measurementId: "G-TOOOOOOOO",
};

firebase.initializeApp(firebaseConfig);