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.

Answer 1

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.