Multi tool use

Clash Royale CLAN TAG

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

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

This is the error I am facing

code for App.js where I am initialising it is

App.js

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

import firebase from 'firebase';

config

2 Answers
2

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;


import firebase from 'firebase';

npm install firebase --save

The exports changed at version 5.0.4 and later. Now you need to do it like this:

import firebase from '@firebase/app'

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'

import '@firebase/auth'

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.