I'm using react-navigation-v5
and react-native-web
in a monorepo architecture.
My stack hierarchy is like this
-- drawer
|-- splashScreen
|-- authStack
|-- appStack
|-- categoryListScreen
|-- searchScreen
|-- profileScreen
|-- aboutUsScreen
My first problem was no stack behaviour in web. I fixed it by passing a linking
object to NavigationContainer
that contains routes, and the heirachy is the exact same as above.
const linking = {
prefixes: [urlPrefixWeb(), urlPrefixNativeDeepLink()],
config: {
splash: {
path: 'splash',
},
auth: {
path: 'auth',
screens: {
login: 'login',
register: 'register',
},
},
app: {
path: 'app',
screens: {
categoryList: 'categoryList',
search: 'search',
profile: 'profile',
aboutUs: 'aboutUs',
},
},
},
};
Now, when I navigate to a random screen inside appStack
everything works correctly. (ex: from categoryListScreen
navigating to searchScreen
or profileScreen
and then back to the categoryListScreen
step by step normally as expected); But when I try to navigate to appStack
's screens from drawerContent
component and going back to the origin screen by browserBackPress, the previous screen is poped either. For example
categoryScreen
-> searchScreen
-> profileScreen
(click from drawerContent
component). Then backPress expected bahaviour is going to searchScreen
but searchScreen
is being popped either and goes to categoryScreen
.
In breaf, props.navigation.navigate
function that comes from drawerContent
component doesn't work correctly and does some kind of replacement always.
So does any one know a workaround or related issue to mention?