firebase read-only React Native

Question

Hello I'm new to React native. I'm trying to make todo list with react native and firebase but I'm always getting error firebase is read-only

Error is showing here

componentDidMount() {
    firebase <---here = new Fire((error, user) => {   

App.js code

import React from 'react';

import {  StyleSheet, Text, View, TouchableOpacity, FlatList, Modal, KeyboardAvoidingView, 
TextInput, ActivityIndicator, } from 'react-native';

import { AntDesing, Ionicons } from '@expo/vector-icons';

import colors from './Colors';

import TodoList from './components/TodoList';

import { LogBox } from 'react-native';

import firebase from 'firebase';

import '@firebase/firestore';


LogBox.ignoreLogs(['Setting a timer']);

      const firebaseConfig = {
      apiKey: "xxxxxxx",
      authDomain: "xxxxxxxxxx",
      projectId: "xxxxxxxx",
      storageBucket: "xxxxxxx",
      messagingSenderId: "xxxxxxxxxx",
      appId: "xxxxxxxxxxxx"
               }
     class Fire {
      constructor(callback) {
      this.init(callback)
        }
 
       init(callback) {
      if (!firebase.apps.length) {
          firebase.initializeApp(firebaseConfig);
      }
      firebase.auth().onAuthStateChanged(user => {
          if (user) {
              callback(null, user);
          } else {
              firebase
                  .auth()
                  .signInAnonymously()
                  .catch(error => {
                   callback(error);
                  });
          }
      });
    }
     get userId() {
       return firebase.auth().currentUser.uid;
        }
       get ref() {
      return firebase
          .firestore()
          .collection("users")
          .doc(this.userId)
          .collection("lists");
        }
    detach() {
      this.unsubscribe();
      }
       }
      componentDidMount() {
    firebase = new Fire((error, user) => {   
      if (error) {
        return alert("Something went wrong");
      }

      firebase.getLists(lists => {
        this.setState({ lists, user }, () => {
          this.setState({ loading: false });

        });
      });

      this.setState({ user });
    });
    }

      addList = list => {
       firebase.addList({
        name: list.name,
        color: list.color,
        todos: []
      });
     };

     updateList = list => {
      firebase.updateList(list);
      };

Any idea how to fix this?

Answer 1

You can't assign anything to the firebase variable because it's an object imported with import firebase from 'firebase'; . Use a different variable name for the assignment.