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.

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.

• javascript
• android
• reactjs
• react-native

• Please be more specific. Can you try to reduce your code size to a minimum example that still fails with the same error? – Loebl Commented May 27, 2018 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 Commented May 27, 2018 at 18:42
• I also cannot see the problem at first hand, but I think it must be related to one of the <Text> tags. Could you try and comment out the <Text> components and their children and see if you still get the error? – dentemm Commented May 27, 2018 at 18:46
• @dentemm I removed this two <Text> tags inside <TouchableOpacity> and it doesn't have any impact. – scrazz Commented May 27, 2018 at 18:57
• Did you also try the <Text> tag for the error message? – dentemm Commented May 27, 2018 at 18:58

10 Answers 10

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.

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!

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 [email protected]

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 [email protected]

try to change the import statement to this:

import firebase from '@firebase/app';

This works for me!

$npm install --save [email protected]

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

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
  });

 "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';

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

$ npm install --save [email protected]

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

$npm install --save [email protected]

Rolling back to firebase version 5.0.3 also resolves the issue.

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