I try to implement for the first time Redux on my React-Native app. I have the error Can’t find variable: render
On my index.js, I call a Provider in order to use Redux. So I add a render it and it triggers this error.
Here is my index.js file:
//index.js
import React from "react";
import {AppRegistry} from 'react-native';
import App from './App';
import { Provider } from 'react-redux'
import Store from './redux/Store/store'
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
render(
<Provider store={Store}>
<App/>
</Provider>,
document.getElementById('root')
)
And if useful, App Component that is called:
import firebase from '@firebase/app'
import '@firebase/auth'
import React from 'react';
import { View, Text, Button, Image, TouchableOpacity, StyleSheet } from 'react-native';
import { createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import Listing from './Listing';
import Menu from './Menu';
import Login from './Login';
import TestRedux from './redux/Components/TestRedux';
firebase.initializeApp({
apiKey: "XXXXXXX",
authDomain: "XXXXXXX",
databaseURL: "XXXXXXX",
projectId: "XXXXXXX",
storageBucket: "XXXXXXX",
messagingSenderId: "XXXXXXX"
});
export class App extends React.Component {
constructor(props){
super(props);
this.state = {
user:'',
loggedAndVerifiedOrNot: false
}
firebase.auth().onAuthStateChanged((user) => {
//this.setState({ user: user })
if (user != null) {
if (user.emailVerified!=null)
{
if (user.emailVerified == true)
this.setState({loggedAndVerifiedOrNot: true})
}
}
});
}
render(){
if (this.state.loggedAndVerifiedOrNot) {
this.props.navigation.navigate('Menu');
}
else {
this.props.navigation.navigate('Login');
}
return (null)
}
}
export default createStackNavigator({
Home: {
screen: App,
},
Login: {
screen: Login,
},
Menu: {
screen: Menu,
},
Listing: {
screen: Listing,
},
TestRedux: {
screen: TestRedux,
},
},
{
initialRouteName: 'Home',
}
);
Do you know where this error comes from and how to solve it ?
1 Answer
The syntax is:
render() {
return ( ... somethingToRender ... )
}
and this
render() {
return (
<Provider store={Store}>
<App/>
</Provider>,
)
}
needs to be inside of your App component and removed from index.js.
You don't need document.getElementById. App is essentially your root element