React native - objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})

Question

I'm new to React Native and I'm getting an error quoted below:

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.

Here's my whole code included in the component file, except styling:

import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, Image, StyleSheet } from 'react-native';
import firebase from 'firebase';

class LoginForm extends Component {

    state = { email: '', password: '', error: '', loading: false };

    onButtonPress(){
        const email = this.state.email;
        const password = this.state.password;

        this.setState({error: '', loading: true});

        firebase.auth().signInWithEmailAndPassword(email, password)
            .then(this.onLoginSuccess.bind(this))
            .catch(() => {
                firebase.auth().createUserWithEmailAndPassword(email, password)
                .then(this.onLoginSuccess.bind(this))
                .catch(this.onLoginFail.bind(this));
            });
    }

    onLoginSuccess(){
        this.setState({email: '', password: '', error: '', loading: false});
    }

    onLoginFail(){
        this.setState({error: 'Nie udalo sie utworzyc konta.', loading: false});
    }

    render(){
        return(
            <View style={styles.container}>
                <View style={styles.imageContainer}>
                    <Image 
                        style={styles.image}
                        source={require('../images/loginIcon.png')}
                    />
                </View>
                <View style={styles.formContainer}>
                    <TextInput
                        style={styles.input}
                        placeholder="Email..."
                        placeholderTextColor='rgba(255,255,255,0.9)'
                        underlineColorAndroid='rgba(0,0,0,0)'
                        onChangeText={(email) => this.setState({email: email})}
                        value={this.state.email}
                        autoCorrect={false}
                    />
                    <TextInput
                        style={styles.input}
                        placeholder="Hasło..."
                        placeholderTextColor='rgba(255,255,255,0.9)'
                        underlineColorAndroid='rgba(0,0,0,0)'
                        autoCorrect={false}
                        onChangeText={(password) => this.setState({password: password})}
                        value={this.state.password}
                        secureTextEntry
                    />
                    <TouchableOpacity style={styles.buttonContainer}>
                        <Text style={styles.button}>
                            Zaloguj się
                        </Text>
                    </TouchableOpacity>
                    <Text style={styles.error}>
                        {this.state.error}
                    </Text>
                </View>
            </View>
        );
    }
}

I'am quite confused how to fix that issue. Thanks in advance.

Please be more specific. Can you try to reduce your code size to a minimum example that still fails with the same error? — Loebl, May 27 '18 at 18:37
I analyze this code for several hours and I really don't know where the problem is. If I delete all methods except render(), the problem is not showing up. — scrazz, May 27 '18 at 18:42
I also cannot see the problem at first hand, but I think it must be related to one of the tags. Could you try and comment out the components and their children and see if you still get the error? — dentemm, May 27 '18 at 18:46
@dentemm I removed this two tags inside and it doesn't have any impact. — scrazz, May 27 '18 at 18:57
No I was thinking in the wrong direction... Now I am looking at your firebase code and am wondering if you are binding this correctly. You are binding your handlers in .then and .catch, but shouldn't you be calling them instead? — dentemm, May 27 '18 at 19:24
Issue is happening even if I remove everything from render(), except a single and empty tag... — scrazz, May 27 '18 at 19:58
where is this LoginForm being used?I do not see any export default here too — VivekN, May 27 '18 at 20:18
Does anybody know what that error means at all? All listed keys belong to ReactNode object. That IS a ReactNode, why it can't be rendered? — jeron-diovis, Sep 27 '18 at 14:09

score 41 · Answer 1 · answered Jul 29 '18 at 00:48

41

I had this problem today. I ran a diff on the source code between 5.0.3 and 5.0.4 and found that the exports have changed. I also found that if I change the import statement to the following that it works with the latest version (5.3.0):

import firebase from '@firebase/app'
import '@firebase/auth'

Doing it this way will allow you to avoid the require in the middle of your code, which is preferred imho.

answered Jul 29 '18 at 00:48

groksrc

2,910
1
29
29

1

This method gives me the error: " _firebase.default.database is not a function: (In '_firebase.default.database()', '_firebase.default.database' is undefined)". Okay, I fixed it. I will post as a separate comment. – ChillyPenguin Aug 25 '18 at 06:49
3

For this to work, you'll need to import all the parts for Firebase that you're using. I wasn't using Auth, but was using Storage and Database. So I had to add: import "@firebase/storage"; import "@firebase/database"; – ChillyPenguin Aug 25 '18 at 06:56
Super stoked that I didn't have to downgrade to get this to work, thanks much – kevinjamesus86 Nov 03 '18 at 20:53
Worked for me. Remember to update the other files where you import firebase (not just App.js) – not_john Jan 03 '19 at 20:08

score 34 · Accepted Answer · answered May 28 '18 at 04:29

34

Try this:

Remove the firebase import statement from App.js:

import firebase from 'firebase'

On Firebase initialization create a constant:

initializeFirebase() {
  const firebase = require("firebase");

  // Initialize Firebase
  var config = {
  ...
  };
  firebase.initializeApp(config);

  //inicializando o firestore
  const firestore = require("firebase/firestore");
  db = firebase.firestore();
  db.settings({ timestampsInSnapshots: true });
}

componentWillMount() {
  this.initializeFirebase();
...
}

To me this workaround works very well!

answered May 28 '18 at 04:29

Clebertom

356
3
3

1

Thank You very much for help, it works! In fact removing firebase import statement from App.js didn't work, but it finally boots up when I remove this import from my component (LoginForm.js) and create this firebase variable inside my onButtonPress() method. – scrazz May 28 '18 at 06:44
1

Thanks @Clebertom – Ajay Jul 02 '18 at 12:48
2

This works for me, but don't miss @GrokSrc's solution below which explains how to still use `import` -> `import firebase from '@firebase/app'` and `import '@firebase/auth'` – Blundering Philosopher Aug 08 '18 at 18:53
@Celebertom, how can I use this solution in my config.js file, it is only js file and not a react-component? Config.js doesn't has react setup, so, How to use componentWillMount()? link is https://github.com/ganesh-deshmukh/exchange-o-gram/blob/master/app/config/config.js – GD- Ganesh Deshmukh Mar 31 '19 at 11:56

score 15 · Answer 3 · answered Jul 12 '18 at 20:27

15

It's an issue with firebase version 5.0.6 whereas downgrading to a version will resolve this issue.for example try this

$ npm install --save firebase@5.0.4

If version 5.0.4 is also not working for you than try version 4.9.1 as this is what i am using and it resolved this issue for me

$npm install --save firebase@4.9.1

answered Jul 12 '18 at 20:27

Anwar Gul

665
4
15

3

This worked for me. I started to use version 4.9.1 and problem went away. – Nicolas Yuste Aug 01 '18 at 13:59

score 7 · Answer 4 · answered Nov 08 '18 at 14:56

7

try to change the import statement to this:

import firebase from '@firebase/app';

answered Nov 08 '18 at 14:56

Eliran Azulay

201
4
3

score 2 · Answer 5 · answered Aug 17 '18 at 19:00

2

This works for me!

$npm install --save firebase@4.9.1

In firebase docs, they say:

Fixed an issue where ES6 wildcard imports were breaking Closure Compiler

LINK >> https://firebase.google.com/support/release-notes/js

answered Aug 17 '18 at 19:00

dieh1984

53
8

score 1 · Answer 6 · answered Aug 06 '18 at 07:39

I had the same problem and i solved it by removing the import statement of firebase:

import firebase from 'firebase'

and replace it by creating a global const inside my component that will be initialized once the component complete mounting :

componentDidMount() {
    this.firebase = require('firebase');
}

then you can use all firebase methods by using this.firebase ... example:

this.firebase.auth().onAuthStateChanged((user) => {
   //Some Code
  });

score 1 · Answer 7 · answered Nov 29 '18 at 07:21

 "dependencies": {
"firebase": "^5.5.9",
"react": "16.6.1",
"react-native": "0.57.7",
"react-native-material-kit": "^0.5.1",
"react-native-vector-icons": "^6.1.0"

}, with above dependencies, I managed to solve this issue by doing following

import firebase from '@firebase/app';

score 0 · Answer 8 · answered Sep 23 '18 at 10:13

This issue comes with firebase version 5.0.6. Try downgrading firebase version by running this command.

$ npm install --save firebase@5.0.4

After this if issue still exist try downgrading firebase plugin to version 4.9.1

$npm install --save firebase@4.9.1

score 0 · Answer 9 · answered Dec 26 '18 at 21:02

0

Rolling back to firebase version 5.0.3 also resolves the issue.

answered Dec 26 '18 at 21:02

Ahmad Sadiq

153
1
1
8

1

Being stuck to an old version is bad, very bad. – Matthieu Brucher Dec 26 '18 at 21:28

score 0 · Answer 10 · answered Mar 03 '19 at 14:47

0

I didn't downgrade I just had to add

import "@firebase/database";

What it means is that you import each firebase component you want to use...(just hope this is right)

but it worked so well for me

answered Mar 03 '19 at 14:47

Nkoro Joseph Ahamefula

526
3
11

React native - objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})

10 Answers10

Linked