react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.49k stars 5.02k forks source link

Error rendering component with react drawer navigation #11129

Open DragoNico10 opened 1 year ago

DragoNico10 commented 1 year ago

Current behavior

I'm trying to make a calculator and navigating screens with Drawer Navigator, but when I try to render it it says: `Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of 'Calculator'.`

App.js: import * as React from 'react'; import DrawerNavigator from './components/DrawerNavigator.js'

export default function App(){ return( \<DrawerNavigator/> ) }

My DrawerNavigator is:

import React from 'react' import { Text } from 'react-native' import { createDrawerNavigator } from '@react-navigation/drawer' import { NavigationContainer } from '@react-navigation/native' import Calculator from '../screens/Calc.js' import History from '../screens/History' import Options from '../screens/Options'

const Drawer=createDrawerNavigator()

const DrawerNavigator=()=>{ return( \<NavigationContainer>

); } export default DrawerNavigator; And my packaje.json is: { "name": "expo-calc", "version": "2.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "npx expo start", "android": "npx expo start --android", "ios": "npx expo start --ios", "web": "npxexpo start --web" }, "dependencies": { "@expo/vector-icons": "^13.0.0", "@expo/webpack-config": "^0.17.2", "@react-navigation/drawer": "6.0.0", "@react-navigation/native": "6.0.0", "expo": "~47.0.9", "expo-status-bar": "~1.4.2", "react": "18.1.0", "react-dom": "18.1.0", "react-native": "0.70.5", "react-native-gesture-handler": "^2.8.0", "react-native-reanimated": "~2.12.0", "react-native-responsive-fontsize": "^0.5.1", "react-native-screens": "^3.18.2", "react-native-web": "~0.18.9" }, "devDependencies": { "@babel/core": "^7.12.9" }, "private": true } ### Expected behavior I tried changing versions in my package but nothing is working. I really need help ### Reproduction I can't share it via snack so: https://github.com/DragoNico10/Calc ### Platform - [X] Android - [X] iOS - [X] Web - [X] Windows - [X] MacOS ### Packages - [ ] @react-navigation/​bottom-tabs - [X] @react-navigation/​drawer - [ ] @react-navigation/​material-bottom-tabs - [ ] @react-navigation/​material-top-tabs - [ ] @react-navigation/​stack - [ ] @react-navigation/​native-stack - [ ] react-native-tab-view - [ ] flipper-plugin-react-navigation ### Environment - [] I've removed the packages that I don't use | package | version | | -------------------------------------- | ------- | | @react-navigation/drawer |6.0.0 |@react-navigation/native |6.0.0 | react-native-screens |^3.18.2 | react-native-gesture-handler |^2.8.0 | react-native-reanimated |~2.12.0 | react-native |0.70.5 | expo |~47.0.9 | node |16.16.0 | npm |9.2.0
github-actions[bot] commented 1 year ago

Couldn't find version numbers for the following packages in the issue:

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?