Comments (5)
@tonypee got this working using the following code for App
:
import React from 'react'
import { Platform } from 'react-native'
import { createBrowserApp } from '@react-navigation/web'
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { Screen } from './Screen'
import { Screen2 } from './Screen2'
const createApp = Platform.select({
web: createBrowserApp,
default: createAppContainer,
})
const AppContainer = createApp(
createSwitchNavigator(
{
Screen: {
screen: Screen,
path: '',
},
Screen2,
},
{
initialRouteName: 'Screen',
},
),
)
from web.
@chrisdrackett, thank you!
Does some body from react navigation team have recommendations for the 'right' way to accomplish this part of auth flow?
from web.
so I'm currently getting around this using nested AppContainer's. I'm not sure if this is valid as I'm just getting started, but at the top level of my app I have a normal app container:
import { createSwitchNavigator, createAppContainer } from 'react-navigation'
import { Startup } from './Startup'
import { App } from './App'
import { Auth } from './Auth'
export default createAppContainer(
createSwitchNavigator(
{
Startup,
Auth,
App,
},
{
initialRouteName: 'Startup',
},
),
)
then within App
I have another:
import React from 'react'
import { Platform } from 'react-native'
import { createBrowserApp } from '@react-navigation/web'
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { Screen } from './Screen'
import { Screen2 } from './Screen2'
const createApp = Platform.select({
web: createBrowserApp,
default: createAppContainer,
})
const AppContainer = createApp(
createSwitchNavigator(
{
Screen,
Screen2,
},
{
initialRouteName: 'Screen',
},
),
)
This seems to work well, even if you visit /Screen2
when not authed you'll see my auth screen. Once logged in /Screen2
will be shown as expected.
The only thing I can't seem to figure out is how to make /Screen
my index view and work as /
. Visiting /
shows the correct view, but I don't know how to get back to that view without it ending up as /Screen
in the url bar.
from web.
So I was able to (almost) get this working without two navigators. The issue I'm running into is that if you open the app with a deep URL that is within App
it seems that the Startup
will be skipped. I found workarounds for this in a native context: https://stackoverflow.com/questions/54350991/react-navigation-deep-linking-with-authentication
but I don't feel these work in a web context.
For now I'm going to keep my nested navigators, but I'm curious if there is a way to support auth without having to "break the rules" :)
from web.
Hello, any news/advice regarding the "Web Auth" flow in web? In my Expo project I'm using a Switch Navigator, however in web, as @tonypee said one can go to the "protected" screens without any type of checks. In my project:
const AppSwitchNavigator = createSwitchNavigator(
{
AuthLoading: { screen: AuthLoadingScreen, path: "" },
Auth: { screen: AuthStack, path: "auth" },
Main: { screen: MainStack, path: "main" },
Error: ErrorScreen
},
{
initialRouteName: "AuthLoading"
}
);
And then, my App Container:
const createApp = Platform.select({
// web: config => createBrowserApp(config, { history: "hash" }),
web: config => createBrowserApp(config),
default: config => createAppContainer(config)
});
export default createApp(AppSwitchNavigator);
I have tried both ways (with history "hash"). I haven't found a lot of documentation about it. I would like to know how to handle this in the web. Thank you!
from web.
Related Issues (20)
- goBack
- navigation.dispatch, Go Back Not working HOT 9
- onNavigationStateChange Props is missing HOT 1
- Uncaught DOMException: Failed to execute 'pushState' on 'History' HOT 7
- navigate params are not updating navigation.state.params HOT 3
- add typescript definitions HOT 1
- how to define an index route? HOT 1
- chose between iOS or Android style for createStackNavigator or similar
- Option to disable setting the url and adding to the history (e.g. for modals) HOT 1
- Is this being supported HOT 3
- Non-required files are somehow being included (and called) in bundle
- navigation go back not working on web HOT 7
- query parameters from url not passed to route HOT 3
- pass function into Header or Custom Navigators in react native web? HOT 1
- Hide params from URL HOT 4
- Expo Web App in a Subdirectory Results in Wrong URL HOT 2
- Browser Back Button Not Working as execpted.
- react navigation in web HOT 7
- How can I prevent display: none being appended randomly on my screen by react-navigation ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web.