CODEWITHSUNDEEP
react-nativereact-navigation
java_doctor_101
java_doctor_101

Reputation: 3367

ReferenceError : Can't find variable React - React Navigation

I am using the DrawerNavigation component of React Navigation. I am passing a custom Drawer Screen using it's contentComponent property. However, I keep getting following error:

enter image description here

I am aware, we are not supposed to post screenshots of the code but I couldn't figure out a way to copy stack trace off simulator.

I checked the DrawerSidebar.js file and it seems to be importing React explicitly. I am using the latest version of react-navigation and this is the file that seems to causing the error.

Upvotes: 2

Views: 6241

Answers (2)

Ramandeep Singh
Ramandeep Singh

Reputation: 51

You have to import react into your navigation component where createDrawerNavigator() defined. Like this:

import React, { Component } from "react";

Upvotes: 5

spitson
spitson

Reputation: 145

Your custom component may be .jsx.

.jsx needs to import React because of its syntax sugar.

https://reactjs.org/docs/jsx-in-depth.html

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

compiles into:

React.createElement(
   MyButton,
   {color: 'blue', shadowSize: 2},
   'Click Me'
)

React Must Be in Scope

Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.

Upvotes: 1

Related Questions