React Navigation does not work with React Native Web

Question

I am trying to implement react navigation in web. I am using react-native-web to build web apps.

Here is my code:

import React from 'react'
import {
  View, 
  StyleSheet,
  Dimensions
} from 'react-native'
import { createSwitchNavigator } from "@react-navigation/core"
import { createBrowserApp, Link } from "@react-navigation/web"

import { ApplicationProvider, Text, Button, Icon, Layout, Spinner } from '@ui-kitten/components'
import * as eva from '@eva-design/eva'


class App extends React.Component{

  static navigationOptions = {
            title: "Home"
        }
  static path = ""

  render(){
    return(
      <ApplicationProvider {...eva} theme={eva.light}>
        <Layout style={styles.container}>
        <Text style={{textAlign: 'center'}}>Home Screen</Text>
        <Link routeName="Chat">Go to Chat</Link>
      </Layout>
      </ApplicationProvider>
    )
  }
}
class Chat extends React.Component{
  static navigationOptions = {
    title: "Chat"
}
  static path = "chat"

  render(){
    return(
      <ApplicationProvider {...eva} theme={eva.light}>
          <Layout style={styles.container}>
          <Text style={{textAlign: 'center'}}>Chat Screen</Text>
          </Layout>
      </ApplicationProvider>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    height: Dimensions.get('window').height
  }
});

const MyNavigator = createSwitchNavigator({
  Home: App,
  Chat: Chat
})

const BWeb = createBrowserApp(MyNavigator)
export default BWeb

When I try to run it, it shows this error in browser: TypeError: (0 , _core.withNavigation) is not a function

Here is a screenshot

It builds successfully. But the error appears in browser. I have the latest libraries installed.

    "react-native": "^0.63.3",
    "react-native-web": "^0.13.16",
    "@react-navigation/core": "^5.12.4",
    "@react-navigation/web": "^1.0.0-alpha.9"

I am using yarn to install libraaries.

I am newbie in building web apps with react. Please help me to get through this

Answer 1

You shouldn't use @react-navigation/core and @react-navigation/web for web integration.

You can follow the web support documentation for web integration: https://reactnavigation.org/docs/web-support