Hi,
I've opened this same issue on Expo's repo as well to no avail.

I'm using react-navigation v4 + @react-navigation/web alongside Expo 38 bare workflow.
I added "homepage": "http://localhost/mypwa/" to the package.json file.
I run expo build:web then copy the contents of web-build to WAMP's www/mypwa/ folder.

When I open up my PWA, the project starts just fine but the URL is incorrect.
Same results for when I run yarn web.
I expect the first URL to be localhost/mypwa/LoginScreen but it's actually localhost/LoginScreen.
Now this doesn't ruin my pwa or anything since I can navigate through the app just fine.
The problem is when I "Add to Home Screen" the URL, my website's main page is added to the homescreen instead of the PWA.

I also implemented react navigation's web container:
const AppContainer = isWeb ? createBrowserApp(AppSwitchNavigator) : createAppContainer(AppSwitchNavigator);

I haven't modified webpack.config.js since I don't know enough about webpack.

Current Behavior

• Title shown in the browser is always "undefined" (this is overwriting the title set in index.html)

Expected Behavior

• Title of the screen should be equal to what is passed in navigator constructor

How to reproduce

This one is a bit hard to show in a Snack because the title is set by snack

import { createSwitchNavigator } from "@react-navigation/core"
import { createBrowserApp } from "@react-navigation/web"
import HomeScreen from "./screens/HomeScreen"

const AppNavigator = createSwitchNavigator({
    Home: {
        screen: HomeScreen,
        title: "Home",
        headerTitle: "Home"
    }
})
export default createBrowserApp(AppNavigator)

The title of the HomeScreen should be home but in stead it's undefined.

Your Environment

it seems that redirects are only handled programmatically, but it would be great to provide a way that makes component-level redirects compatible with server-rendering

react-router does via it's Redirect component, and using the context prop to find out what the result of the rendering was (see: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/server-rendering.md)

Is there a way to prevent query parameters being written into the URL?

I am porting my React Native project to the web and I have a few screens that add a function as a parameter in componentDidMount. This allows a button in the header to trigger this function. When using createBrowserApp this function is written as a query parameter into the URL. Is there a way around this?

is this library still being supported we are about to start work on our website having build our react-native app first, and would like to be able to share logic. But as the site is very enterprise I'm not overly comfortable to use a library that is Alpha and the last significant enough release to put in releases was 10 months ago.

It would be super handy to be able to disable adding to the history and setting the url for certain routes, for example dialogs and modals.

How can I navigate to the same route when passing different params? navigation.navigate doesn't re-render the page.

Hi, I am using

"@react-navigation/web": "^1.0.0-alpha.9",
"react": "16.9.0",
"react-native-web": "0.11.7",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2",
"react-navigation-tabs": "^2.9.0",

I am facing below problems.

1. For some screens the browser bak buttons work perfectly.
2. For some other screen, After pressing the browser back buttons also it will remain on the same screen.
3. For some other screen, the browser back button should press more than once(2-3) to go back.

This behavior is not constant i.e. it will change randomly from screen to screen.

I have referred this to handle browser back buttons https://www.youtube.com/watch?v=Czih6w57P9A i.e.

import { createBrowserApp } from '@react-navigation/web'
import { createAppContainer } from 'react-navigation'

const Navigator = Platform.OS === 'web' ? createBrowserApp(config, { history: 'hash' }) : createAppContainer(config)

Can you help me out? Thanks.

Hey I'd love to test, perhaps hack on this, and know if it's a viable approach. Any chance a super minimal README could be added detailing:

• The idea/concept
• Any instructions
• Viability

Cheers!
JP

Current Behavior

Adding a style prop to a Link does not change the style of the Link

import { Link } from '@react-navigation/web'

<Link routeName="Landing" style={{ textDecoration: 'none' }}>
        <PrimaryButton title={'◀︎ Back to Home'} style={styles.button} />
</Link>

Expected Behavior

The child components should not be underlined (or textDecorated)

How to reproduce

I believe the same issue is reproduced here?
https://github.com/react-navigation/web-server-example/blob/master/src/AppView.js

Your Environment

I am looking at a workaround for this, similar to a robots.txt Disallow option. Maybe this should be an option provided by react-navigation-web.

onNavigationStateChange Props is missing in web

Hi, I'm trying to use createBrowserApp with latest preview for expo's web support.
Navigation itself works fine, but URL is not updated when navigation happens.

here is the error

Uncaught DOMException: Failed to execute 'pushState' on 'History':
 A history state object with URL 'http://groups/someuid' cannot be created in a
 document with origin 'http://localhost:19006' and URL 'http://localhost:19006/'.

What I'm trying to do is to navigate from / to /groups/someuid. Page will change, but URL stays same.
Also when I visit /groups/someuid it always renders /, so deeplink is not working.
I'm using nested navigators by the way.

FYI:
My current workaround is to actually use createAppContainer instead of createBrowserApp, and manually rewrite URL.

navigation.navigate('Group', { id: id })
window.history.pushState({}, null, `/groups/${id}`)

Since there is a minor bug on using createAppContainer, but setting up prefix solves deeplink issue, and it works fine, but I want to know if there is a better solution for this.
ref: Deeplink with react-navigation will fail due to prefix returned by expo Linking · Issue #27 · expo/web-examples

is there a reason the Link component is only for the web build?

as much as possible, i'd like to reuse the same code for native/web, which is why I'm opting to use react-navigation rather than react-router. but this is only possible if the same components are available in both environments.

could we perhaps make it so that the Link component conditionally renders a text component rather than a a tag? or is there any other things needed to make it work with native code?

I'm looking to define a route for / but I'm not sure how to do this. I was hoping that the value of initialRouteName would be used to define the base route, but that isn't the case.

Hi, how do we return 404 status from the server if a path is not found? And even show a 404 state in the UI. Is there any API for this?

Dear Friends,

I have a react-native web and recently i`m start migrate to web application (with react-navigation for web) but i have a problem navigation.dispatch not working just in web in react-native working as well

in Luanch page in some case i will be reset AuthNavigator for navigat to Join page
NavigationService.reset(['AuthNavigator'])

here is data of resetAction:

Current Behavior

index.js

// @flow

import React, { Component } from 'react'
import { View } from 'react-native'
import { createSwitchNavigator } from '@react-navigation/core'
import { createBrowserApp } from '@react-navigation/web'
// import Launch from 'src/components/init/launch/Launch'
import AuthNavigator from 'src/navigators/AuthNavigator'
// import MainTabNavigator from 'src/navigators/MainTabNavigator'

const MainNavigator = createSwitchNavigator(
  {
    Launch: { screen: Launch },
    AuthNavigator: { screen: AuthNavigator },
    // MainTabNavigator: { screen: MainTabNavigator },
   
  },
  {
    initialRouteName: 'Launch',
  }
)

type Props = {
  lastSupportedVersion: string,
  lastStableVersion: string,
  needForceUpdate: string,
  needOptionalUpdate: boolean
}

const AppContainer = createBrowserApp(MainNavigator)

class MainNavigatorWithMeta extends Component<Props, void> {
  _onBackPress: Function
  _getActiveRouteName: Function

  constructor(props) {
    super(props)
    this._getActiveRouteName = this._getActiveRouteName.bind(this)
    this._onBackPress = this._onBackPress.bind(this)
  }
  componentDidMount() {
    // BackHandler.addEventListener('hardwareBackPress', this._onBackPress)
  }

  componentWillUnmount() {
    // BackHandler.removeEventListener('hardwareBackPress', this._onBackPress)
  }

  _onBackPress() {
    // analytics().logEvent('back_hardware')
  }
  // gets the current screen from navigation state
  _getActiveRouteName(navigationState) {
    if (!navigationState) {
      return null
    }
    const route = navigationState.routes[navigationState.index]
    // dive into nested navigators
    if (route.routes) {
      return this._getActiveRouteName(route)
    }
    return route.routeName
  }

  render() {
    return (
        <AppContainer
          screenProps={{ ...this.props }}
          ref={(navigatorRef) => {
            NavigationService.setTopLevelNavigator(navigatorRef)
          }}
        />
    )
  }
}

export default Metadata.providers.metadata(MainNavigatorWithMeta)

NavigationService.js

// @flow

import { NavigationActions, StackActions } from '@react-navigation/core'

let _navigator

function setTopLevelNavigator(navigatorRef: any): any {
  _navigator = navigatorRef
}

function navigate(routeName: string, params: any): void {
  const navigateAction = NavigationActions.navigate({
    routeName,
    params
  })
  _navigator._navigation.dispatch(navigateAction)
}

function reset(routeNames: Array<string>): void {
  let actions = null
  for (let i = routeNames.length - 1; i >= 0; i--) {
    let params: any = { routeName: routeNames[i] }
    if (i !== routeNames.length - 1) {
      params.action = actions
    }
    actions = NavigationActions.navigate(params)
  }
  const resetAction = StackActions.reset({
    index: 1,
    key: null,
    actions: [actions]
  })
  console.log('resetAction', resetAction)
  _navigator._navigation.dispatch(resetAction)
}

export default {
  navigate,
  reset,
  setTopLevelNavigator
}

AuthNavigator

// @flow

import { createSwitchNavigator } from '@react-navigation/core'
import Join from 'src/components/init/auth/Join'
import Login from 'src/components/init/auth/Login'
import { COLOR_WHITE } from 'src/shared/styles/colors'

const AuthNavigator = createSwitchNavigator(
  {
    Join: { screen: Join },
    Login: { screen: Login }
  },
  {
    initialRouteName: 'Join',
    headerMode: 'none',
    navigationOptions: {
      gesturesEnabled: false
    },
    cardStyle: { backgroundColor: COLOR_WHITE }
  }
)

export default AuthNavigator

Expected Behavior

navigate to Join page same as react-native

Your Environment

It seems the default for the StackNavigator is android style, ideally there would be a way to select the iOS look and feel if wanted as well.

i'm trying to go directly to a 3rd level route, I get the following issue with the navigation state
https://github.com/react-navigation/react-navigation-core/issues/39

I am using react navigation for the web and I have an issue where display: none; is being applied on a screen.

I am not able to understand where it is happening, but since it's on the screen and we do not apply web style in our react native app, I suspect that something in react navigation is doing this, causing our svg background not being displayed.

Any clue what could cause such style to be applied ?

Thanks a lot.

    "@react-navigation/bottom-tabs": "^5.11.1",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.4",

How to run the demo ? below are error logs
Plz help investigate, thank you

D:\Demos\react-navigation-web>npm run release

@react-navigation/[email protected] release D:\Demos\react-navigation-web
release-it

ERROR Working dir must be clean.
Please either stage and commit your changes, or use the requireCleanWorkingDir: false option to include the changes in the release commit.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @react-navigation/[email protected] release: release-it
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @react-navigation/[email protected] release script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\Roaming\npm-cache_logs\2018-11-24T22_00_26_223Z-debug.log

D:\Demos\react-navigation-web>npm run release

@react-navigation/[email protected] release D:\Demos\react-navigation-web
release-it

ERROR Working dir must be clean.
Please either stage and commit your changes, or use the requireCleanWorkingDir: false option to include the changes in the release commit.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @react-navigation/[email protected] release: release-it
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @react-navigation/[email protected] release script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

When doing
navigation.navigate(route, params)
The params are not reflected in the navigation.state.params

If you go to a url with parameter such as
myapp/Home?x=1 then x=1 is added to navigation.state.params
Then doing navigation.navigate('Home',{x:undefined}) will change the route to /Home
but the navigation.state doesnt change

then doing another navigation.navigate(anyroute) causes the location to change to /anyroute?x=1 (every history change the params are read from the state)

after i try to reuse my react-native project in web i found couple of issues on react-navigation

Example of project is here in codesandbox

issue 1 : (navigation.goBack not working)

app landing in transaction page and will be show 2 item:
on Press one item will be navigate to transactionDetails page with params and working as well
but on click back button on header navigation.goBack not working
step to reproduce: tansaction-> transactionDetails -> Back

issue 2: (NavigationService.reset not working)

after navigate to transaction detail and push navigation reset button reset not working like below issue:
#20
get reset from ref not working but navigationService.navigate working as well
step to reproduce: tansaction-> transactionDetails -> Navigation Reset

issue 3: (navigation with object params refresh issue)

in this case in url query string will be set [object Object] but after navigate in get params data is exsit and working fine in case landing with navigate
in refresh page app get exeption becouse there is no data
example : /TransactionDetail?transaction=[object Object]
step to reproduce : tansaction-> transactionDetails

issue 4: (navigation with string params when route inside other createSwitchNavigator)

in case navigate with params not working as well and params in undefiend but in refresh page get params from query string as well
step to reproduce: TopUp -> select Operator -> check operatorCode: (undefined | Number)

Your Environment

If I load a url localhost/?test=1
navigation.state.params will be empty
only when using navigation.navigateTo(route,params) it works

Any guidance on how to support back behavior with the browser back button?

Since the switch navigator is the only available option on web, the browser back button event will pop a historical URL without the browser application responding as a forward navigation.

unfortunately navigation go back not working on web

this.props.navigation.goBack(null)
Functions is exist

after some check i realized in getNavigationActionCreators.js this "import NavigationActions from '../NavigationActions'; " not working as well and NavigationActions is not defiend

"@react-navigation/core": "^3.3.1",
"@react-navigation/web": "^1.0.0-alpha.7",

#21

unfortunately navigation go back not working on web

i tested when pass null or a key

this.props.navigation.goBack(null)

Functions is exist
https://github.com/react-navigation/react-navigation-core/issues/53

Hey, I've discovered a weird bug likely somewhere deep in the webpack config: I have a dist directory (I'm using Typescript) that occasionally has old non-required files inside of it. My app entry point and all the branches from the entry point never reference the files. In all my years of dev, it has never been a problem having these orphaned files sitting around. No other file is requiring them and all is well and good.

However, somehow these non-required files are being included in my Webpack bundle for Expo web, making my app blow up in weird and obscure ways. When I rm -rf my dist directory and do a fresh Typescript compile on everything, the problem goes away and since the files no longer exist they are excluded from the bundle and my app works again.

There's clearly a workaround here (just clean your dist directory after renaming) but this just seems wrong and problematic to me. Is there some weirdness deep in the webpack config?

"dependencies": {
    "@react-navigation/core": "3.0.0-alpha.19",
    "@react-navigation/web": "^1.0.0-alpha",
    "react": "^16.8.4",
    "react-art": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-native-web": "0.10.0",
    "react-scripts": "2.1.8"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "7.3.4",
    "@babel/plugin-proposal-export-default-from": "7.2.0",
    "customize-cra": "0.2.12",
    "react-app-rewired": "2.1.0"
  },

React Navigation works when run with react-scripts start but fails when scripts is replaced with react-app-rewired start.

This is config-overrides.js

Output

Hi guys,

Im finding that following the normal react-navigation 'Auth Flow' as per the docs breaks when targetting web - as the url deep linking will bypass that route, and therefore the nested screen is loaded without the auth being inited.

has anyone experienced this - what are you thoughts on how to address this problem?

Hi,
In native react navigation, we can use navigation.setParams to pass our functions into Header (by using navigationOptions and navigation.getParam as described in this)

But on the web, setParams does not work properly and serialize function into query-strings and urls get very messy.

Is there any better way to pass function into Header or Custom Navigators in react native web?

Current Behavior
the header bar placed at bottom of page in web!

Expected Behavior
header bar placed at top of page!.
How to reproduce
I use react navigation 5 for my react native application. there is not any problem in android and ios. but when I use this code for web, the header bar placed at bottom of page.
I use webpack for create bundle and run web.

Environment
npx react-native info:
info Fetching system and libraries information...
System:
OS: macOS 11.1
CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
Memory: 111.28 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 15.2.1 - /usr/local/bin/node
Yarn: Not Found
npm: 7.4.3 - ~/node_modules/.bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
Android SDK:
API Levels: 29
Build Tools: 28.0.3, 29.0.2
System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 12.2/12B45b - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_275 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ^16.13.1 => 16.13.1
react-native: ^0.63.4 => 0.63.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

web
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"react-native-gesture-handler": "^1.10.3",
"react-native-safe-area-context": "^3.1.7"
"react-native-screens": "^2.11.0"
node v15.2.1 |