Objects are not valid as a React child

Last updated 5 months ago

Description

This description only applies to error related to Google Firebase library import. I suggest that it's possible this error occurs in other cases.

When you import Google Firebase library to your React Native project you might happen to get error "Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead".

This happens because of importing Firebase library, which has a bug.

For example here is a working code which shows a text and code which triggers that red screen. The only difference between them is a Firebase import statement.

Working code
Code triggers error
import React, { Component } from 'react';
import { Text } from 'react-native';
class App extends Component {
componentWillMount() {
}
render() {
return (
<Text>Some text</Text>
);
}
}
export default App;
import React, { Component } from 'react';
import { Text } from 'react-native';
// We just added this import statement
import firebase from 'firebase';
class App extends Component {
componentWillMount() {
}
render() {
return (
<Text>Some text</Text>
);
}
}
export default App;

There are several recommendations about how to solve this error. Let's look at them.

Solutions

First way
Second way
Third way

If you want to use the latest version of Firebase import this way

import firebase from '@firebase/app';

and then import Firebase parts which are required. So if you are using auth module import like this

import '@firebase/auth';

So the full source code will look like this

import React, { Component } from 'react';
import { Text } from 'react-native';
// importing latest version of firebase library
import firebase from '@firebase/app';
import '@firebase/auth';
class App extends Component {
componentWillMount() {
// here is some firebase code
}
render() {
return (
<Text>Some text</Text>
);
}
}
export default App;

Downgrade firebase version.

$ npm install --save firebase@4.9.1

You can wrap up Firebase library import statements into method.

initializeFirebase() {
const firebase = require("firebase");
// Initialize Firebase
var config = {
// your configuration is required
};
firebase.initializeApp(config);
//Initialize a Firestore
const firestore = require("firebase/firestore");
db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });
}

And then call this function in appropriate place.

componentWillMount() {
this.initializeFirebase();
}

So the full example will look like this

import React, { Component } from 'react';
import { Text } from 'react-native';
class App extends Component {
// Function wrapping up Firebase initialization statements
initializeFirebase() {
const firebase = require("firebase");
// Initialize Firebase
var config = {
// your configuration is required
};
firebase.initializeApp(config);
//Initialize a Firestore
const firestore = require("firebase/firestore");
db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });
}
componentWillMount() {
this.initializeFirebase();
}
render() {
return (
<Text>Some text</Text>
);
}
}
export default App;

Note: Just don't forget to fill in configuration object, otherwise you will get other error FirebaseError "projectId" not provided in firebase.initializeApp

Links