CODEWITHSUNDEEP
reactjsfirebasereact-nativefirebase-authentication
Ansh Gujral
Ansh Gujral

Reputation: 291

objects are not valid as react child (react-native)

I am trying to initialize firebase in my react native project.

This is the error I am facing

code for App.js where I am initialising it is

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducers from './reducers';
import firebase from 'firebase';

class App extends Component {

  componentWillMount () {
    const config = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: ""
    };
    firebase.initializeApp(config);
  }

  render() {
    return (
      <Provider store={createStore(reducers)}>
      <View>
        <Text>Hello! </Text>
      </View>
    </Provider>
    );
  }
}

export default App;

I even face the same error when I only include import firebase from 'firebase'; and don't initialize the config

Upvotes: 1

Views: 1930

Answers (2)

groksrc
groksrc

Reputation: 3025

The exports changed at version 5.0.4 and later. Now you need to do it like this:

import firebase from '@firebase/app'

If you're using eslint you'll probably get a complaint that it should be listed in the project dependencies, but you can ignore that.

You'll probably also want to use the actual features of firebase rather than just the core import. For example, to use the authentication module you'd add the following:

import '@firebase/auth'

Upvotes: 8

Bruno Mazzardo
Bruno Mazzardo

Reputation: 1586

Try initializing on constructor instead of componentWillMount 

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducers from './reducers';
import firebase from 'firebase';

class App extends Component {

 constructor(props){
    super(props)
    const config = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: ""
    };
    firebase.initializeApp(config);
  }


  render() {
    return (
      <Provider store={createStore(reducers)}>
      <View>
        <Text>Hello! </Text>
      </View>
    </Provider>
    );
  }
}

export default App;

Upvotes: 0

Related Questions