react navigation issue with versions

Question

I have a problem when I try to add a bottomnavigation in my app on the main screen:

This is the main screen code:

// Main.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import firebase from 'react-native-firebase';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

export default class Main extends React.Component {
  state = { currentUser: null }
  componentDidMount() {
    const { currentUser } = firebase.auth()
    this.setState({ currentUser })
}
  render() {
    const { currentUser } = this.state

  return (
      <View style={styles.container}>
        <Text>
          Hi {currentUser && currentUser.email}!
        </Text>

      </View>

    )
  }
}
 const bottomTabNavigator = createBottomTabNavigator(
  {
    Main: Main,
  },
  {
    initialRouteName: 'Main'
  }
);


const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }
  })

No when I run it I get this error:

    Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/en/hello-react-navigation.html for usage guide.

<unknown>
    index.bundle?platform=ios&dev=true&minify=false:109707:24
<global>
    Main.js:24
loadModuleImplementation
    require.js:322:6
guardedLoadModule
    require.js:201:45
runUpdatedModule
    require.js:657:17
metroHotUpdateModule
    require.js:533:8
define
    require.js:53:24
global code
    Main.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:4
<unknown>
    [native code]:0
inject
    injectUpdate.js:62:35
forEach
    [native code]:0
injectUpdate
    injectUpdate.js:71:26
on$argument_1
    HMRClient.js:40:21
emit
    index.js:202:37
_ws.onmessage
    WebSocketHMRClient.js:72:20
EventTarget.prototype.dispatchEvent
    event-target-shim.js:818:39
_eventEmitter.addListener$argument_1
    WebSocket.js:232:27
emit
    EventEmitter.js:190:12
callFunctionReturnFlushedQueue
    [native code]:0

So i checked my package file which is:

{
  "name": "kowop",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/bottom-tabs": "^5.0.3",
    "@react-navigation/material-bottom-tabs": "^5.0.1",
    "@react-navigation/native": "^5.0.1",
    "email-validator": "^2.0.4",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-firebase": "^5.6.0",
    "react-native-gesture-handler": "^1.5.6",
    "react-native-paper": "^3.6.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.6.4",
    "react-native-screens": "^2.0.0-beta.2",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.1.1",
    "react-navigation-stack": "^2.0.16",
    "typescript": "^3.7.5"
  },
  "devDependencies": {
    "@babel/core": "7.8.3",
    "@babel/runtime": "7.8.3",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "^6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

But apparently react-navigation can't be updated above 4.11 or at least that is what the npm page says.

244,663 Version

4.1.1 License

MIT Unpacked Size

41 kB Total Files

12 Issues

133 Pull Requests

3

So I am a bit lost here. Does anyone see what I do wrong?

Thanks a lot!

Tim

Answer 1

You are using react-navigation v5 dependencies but in your code you implement with v4 api way.

You should change react-navigation dependencies to v4 to make your code work.

I made you code work on snack : demo