FirebaseError: Firebase. No Firebase App '[DEFAULT]' has been created - firebase

Question

i try to make simple CRUD app froem react native with fire base but i keep getting this error when connecting firebase with app in register view
the function is to register a new user to database in firebase
The error
My register view.js
import React, {Component} from 'react';
import {Text,TextInput, View, Image } from 'react-native';
import Waiter_login from '../../../components/molecules/Waiter_login/';
import firebase from 'firebase';
import 'firebase/firestore';
class Register extends Component{
constructor() {
super();
this.dbRef = firebase.firestore().collection('users');
this.state = {
email: '',
username: '',
password: '',
isLoading: false
};
}
inputValueUpdate = (val, prop) => {
const state = this.state;
state[prop] = val;
this.setState(state);
}
storeUser() {
if(this.state.username === ''){
alert('Isi username kamu!')
} else {
this.setState({
isLoading: true,
});
this.dbRef.add({
email: this.state.email,
username: this.state.username,
password: this.state.password,
}).then((res) => {
this.setState({
email: '',
username: '',
password: '',
isLoading: false,
});
this.props.navigation.navigate('Login')
})
.catch((err) => {
console.error("Error found: ", err);
this.setState({
isLoading: false,
});
});
}
}
render(){
const { navigate } = this.props.navigation;
return (
<View style={{flex:1}}>
<View style={{flex:1,backgroundColor:'white'}}>
<Waiter_login title='Please Register Here' img={require('../../../assets/register-fam.png')} />
<View style={{ marginLeft:50,marginRight:50,textAlign: 'center', marginVertical: 5}}>
<TextInput placeholder="Username" style={{ marginTop:10, height: 40, width: 300,paddingLeft:15, borderColor: 'gray', borderWidth: 1, borderRadius:25}} value={this.state.username} /*onChangeText={text => onChangeText(text)}*/onChangeText={(val) => this.inputValueUpdate(val, 'username')} />
<TextInput placeholder="Password" style={{ marginTop:10, height: 40, width: 300,paddingLeft:15, borderColor: 'gray', borderWidth: 1, borderRadius:25}} onChangeText={text => onChangeText(text)}/>
<TextInput placeholder="Phone" style={{ marginTop:10, height: 40, width: 300,paddingLeft:15, borderColor: 'gray', borderWidth: 1, borderRadius:25}} onChangeText={text => onChangeText(text)}/>
<TextInput placeholder="Email" style={{ marginTop:10, height: 40, width: 300,paddingLeft:15, borderColor: 'gray', borderWidth: 1, borderRadius:25}} onChangeText={text => onChangeText(text)}/>
<View style={{backgroundColor:'#432f96', borderRadius:15,marginTop:20,paddingBottom:7,paddingTop:7}}>
<Text style={{fontSize:22,fontWeight: 'bold', color:'white',textAlign:'center'}} onPress=/*{() => navigate('Login')}*/{() => this.storeUser()} >Register</Text>
</View>
</View>
{/* <View style={{backgroundColor:'#ffff',marginTop:20,marginLeft:50,marginRight:50}}>
<Image style={{height:67,width:310}} source={require('./src/assets/login_google.png')} />
</View> */}
</View>
<View style={{height:40,backgroundColor:'#ededed'}}>
<View style={{alignSelf:'center',marginTop:5}}>
<Text style={{fontSize:12, color:'grey'}}>made with love BudakBandung</Text>
</View>
</View>
</View>
)
}
}
export default Register;
My firebase.js
import * as firebase from 'firebase';
import 'firebase/firestore';
const firebaseConfig={
apiKey: "AIzaSyCHTSbVaLFiIvb7QOfzQEdcPxCPCt_5gA4",
authDomain: "pesendulu-9dd4f.firebaseapp.com",
databaseURL: "https://pesendulu-9dd4f.firebaseio.com",
projectId: "pesendulu-9dd4f",
storageBucket: "pesendulu-9dd4f.appspot.com",
messagingSenderId: "733125666943",
appId: "1:733125666943:web:5980721527735d9235b74a",
measurementId: "G-3TE04D9S77"
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
};
firebase.firestore().settings(settings);
export default firebase;
what is the problem and what should i do to make it work ? thanks before

Answer 1

if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig);}
use this code,this code will fix your issue