Documentation can be found on the React Navigation website.
See the guide for usage on the web.
Tools for react-navigation on web browsers and servers
Home Page: https://reactnavigation.org
License: MIT License
Documentation can be found on the React Navigation website.
See the guide for usage on the web.
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>
The child components should not be underlined (or textDecorated)
I believe the same issue is reproduced here?
https://github.com/react-navigation/web-server-example/blob/master/src/AppView.js
software | version |
---|---|
@react-navigation/web | 1.0.0-alpha.7 |
react-native-web | 0.5.4 |
node | 9.11.2 |
yarn | 1.7.0 |
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)
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
onNavigationStateChange Props is missing in web
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.
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 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",
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
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:
Cheers!
JP
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.
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'])
// @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)
// @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
}
// @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
navigate to Join page same as react-native
software | version |
---|---|
react-navigation core | "3.2.0" |
react-navigation web | "1.0.0-alpha.7" |
react-native-web | "0.11.2" |
node | 8 |
npm or yarn | yarn |
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?
If I load a url localhost/?test=1
navigation.state.params will be empty
only when using navigation.navigateTo(route,params) it works
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.
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,
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.
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.
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.
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?
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 |
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.
software | version |
---|---|
@react-navigation/core | ^3.0.0 |
@react-navigation/web | ^1.0.0-alpha.7 |
react | ^16.6.3 |
node | v9.5.0 |
npm | 6.1.0 |
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?
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
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
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
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
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)
software | version |
---|---|
react-navigation core | "3.2.0" |
react-navigation web | "1.0.0-alpha.7" |
react-native-web | "0.11.2" |
node | 8 |
npm or yarn | yarn |
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?
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",
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)
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.
"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
.
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?
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.