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

Question

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

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

This looks like the same error, so I'm linking them just in case: https://github.com/firebase/firebase-js-sdk/issues/908#issuecomment-395117364 — Frank van Puffelen, Jun 07 '18 at 03:09
Had the same problem, cleberton response [here](https://stackoverflow.com/questions/50555275/react-native-objects-are-not-valid-as-a-react-child-found-object-with-keys#_=_) fixed it for me. — Ikechi, Jun 18 '18 at 09:26
Had the same issue, cleberton response [here](https://stackoverflow.com/questions/50555275/react-native-objects-are-not-valid-as-a-react-child-found-object-with-keys#_=_) fixed it for me. — Ikechi, Jun 18 '18 at 09:27

score 8 · Accepted Answer · answered Jul 29 '18 at 00:50

8

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'

answered Jul 29 '18 at 00:50

groksrc

2,910
1
29
29

1

for realtime-database is import '@firebase/database'? – Revsky01 Aug 30 '18 at 03:12
Still don't understand why this can result on the reported error, but it worked for me too. Thanks – Danielo515 Nov 13 '18 at 13:24

score 0 · Answer 2 · answered Jun 06 '18 at 23:21

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;

Didn't work! And I repeat the error is mainly due to `import firebase from 'firebase';` I need to important it successfully. I have installed firebase using `npm install firebase --save` in the root directory of project. — Ansh Gujral, Jun 07 '18 at 03:14

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

2 Answers2