React Native - Can't Find Variable: Render

React Native - Can't Find Variable: Render

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

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Sarah Jenkins
Author

Sarah Jenkins

Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.