Can't set Deep linking with react-navigation V3
1
I tried to implement Deep Linking following the official documentation as reference.
I have finished IOS configuration on XCode.
But when I paste the url mychat://chat it opens my A screen not Second screen. I tested initialRouteName: 'Second' it is working.
So I can't figure out what step I am missing.
Here is my Router.js:
import { createMaterialTopTabNavigator, createStackNavigator,
createDrawerNavigator, createTabNavigator,
createBottomTabNavigator, createAppContainer
} from 'react-navigation';
import React, { Component } from 'react';
import { Platform } from 'react-native';
import A from './components/A';
import B from './components/B';
import Second from './components/Second';
import DrawerPanel from './components/DrawerPanel';
const Stack = createStackNavigator({
A: {
screen: createBottomTabNavigator({
'A Screen': A,
'B Screen': B
},
{
swipeEnabled: false,
lazyLoad: false,
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
tabStyle: {
width: 125,
height: 50
},
scrollEnabled: true
}
})
},
Second: {
screen: Second,
// path: 'chat/:user'
path: 'chat'
}
},
{
initialRouteName: 'A',
headerMode: 'screen'
}
);
// combine DrawerPanel
const Router = createDrawerNavigator({
FirstScreen: {
screen: Stack
}
},
{
contentComponent: DrawerPanel,
drawerWidth: 200
});
// about Deep linking
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
const SimpleApp = createAppContainer(Router);
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
export default MainApp;
My React Native dependencies:
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-gesture-handler": "^1.0.9",
"react-navigation": "^3.0.0"
},
Any help would be appreciated. Thanks in advance.
react-native react-navigation
edited Nov 26 '18 at 18:37
micnil
2,73911623
asked Nov 23 '18 at 4:15
徐博俊徐博俊
1,25021638
add a comment |
1
I tried to implement Deep Linking following the official documentation as reference.
I have finished IOS configuration on XCode.
But when I paste the url mychat://chat it opens my A screen not Second screen. I tested initialRouteName: 'Second' it is working.
So I can't figure out what step I am missing.
Here is my Router.js:
import { createMaterialTopTabNavigator, createStackNavigator,
createDrawerNavigator, createTabNavigator,
createBottomTabNavigator, createAppContainer
} from 'react-navigation';
import React, { Component } from 'react';
import { Platform } from 'react-native';
import A from './components/A';
import B from './components/B';
import Second from './components/Second';
import DrawerPanel from './components/DrawerPanel';
const Stack = createStackNavigator({
A: {
screen: createBottomTabNavigator({
'A Screen': A,
'B Screen': B
},
{
swipeEnabled: false,
lazyLoad: false,
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
tabStyle: {
width: 125,
height: 50
},
scrollEnabled: true
}
})
},
Second: {
screen: Second,
// path: 'chat/:user'
path: 'chat'
}
},
{
initialRouteName: 'A',
headerMode: 'screen'
}
);
// combine DrawerPanel
const Router = createDrawerNavigator({
FirstScreen: {
screen: Stack
}
},
{
contentComponent: DrawerPanel,
drawerWidth: 200
});
// about Deep linking
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
const SimpleApp = createAppContainer(Router);
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
export default MainApp;
My React Native dependencies:
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-gesture-handler": "^1.0.9",
"react-navigation": "^3.0.0"
},
Any help would be appreciated. Thanks in advance.
react-native react-navigation
edited Nov 26 '18 at 18:37
micnil
2,73911623
asked Nov 23 '18 at 4:15
徐博俊徐博俊
1,25021638
Haven't looked at your code too deeply, but i've been stuck for hours with deep linking using react navigation v3, and haven't gotten it working yet. I bet some step is missing from the documentation.
– micnil
Nov 26 '18 at 18:33
1
I think you could simplify your code for the purpose of this question. First remove all styling/options (tabBarOptions, swipeEnabled, headerMode, etc.). Then remove the DrawerPanel, you can useStackas your app container:createAppContainer(Stack);? All your doing is nesting the stack navigator unnecessarily. I really hope you'll get an answer to this :)
– micnil
Nov 26 '18 at 18:50
add a comment |
1
1
1
2
I tried to implement Deep Linking following the official documentation as reference.
I have finished IOS configuration on XCode.
But when I paste the url mychat://chat it opens my A screen not Second screen. I tested initialRouteName: 'Second' it is working.
So I can't figure out what step I am missing.
Here is my Router.js:
import { createMaterialTopTabNavigator, createStackNavigator,
createDrawerNavigator, createTabNavigator,
createBottomTabNavigator, createAppContainer
} from 'react-navigation';
import React, { Component } from 'react';
import { Platform } from 'react-native';
import A from './components/A';
import B from './components/B';
import Second from './components/Second';
import DrawerPanel from './components/DrawerPanel';
const Stack = createStackNavigator({
A: {
screen: createBottomTabNavigator({
'A Screen': A,
'B Screen': B
},
{
swipeEnabled: false,
lazyLoad: false,
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
tabStyle: {
width: 125,
height: 50
},
scrollEnabled: true
}
})
},
Second: {
screen: Second,
// path: 'chat/:user'
path: 'chat'
}
},
{
initialRouteName: 'A',
headerMode: 'screen'
}
);
// combine DrawerPanel
const Router = createDrawerNavigator({
FirstScreen: {
screen: Stack
}
},
{
contentComponent: DrawerPanel,
drawerWidth: 200
});
// about Deep linking
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
const SimpleApp = createAppContainer(Router);
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
export default MainApp;
My React Native dependencies:
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-gesture-handler": "^1.0.9",
"react-navigation": "^3.0.0"
},
Any help would be appreciated. Thanks in advance.
react-native react-navigation
edited Nov 26 '18 at 18:37
micnil
2,73911623
asked Nov 23 '18 at 4:15
徐博俊徐博俊
1,25021638
I tried to implement Deep Linking following the official documentation as reference.
I have finished IOS configuration on XCode.
But when I paste the url mychat://chat it opens my A screen not Second screen. I tested initialRouteName: 'Second' it is working.
So I can't figure out what step I am missing.
Here is my Router.js:
import { createMaterialTopTabNavigator, createStackNavigator,
createDrawerNavigator, createTabNavigator,
createBottomTabNavigator, createAppContainer
} from 'react-navigation';
import React, { Component } from 'react';
import { Platform } from 'react-native';
import A from './components/A';
import B from './components/B';
import Second from './components/Second';
import DrawerPanel from './components/DrawerPanel';
const Stack = createStackNavigator({
A: {
screen: createBottomTabNavigator({
'A Screen': A,
'B Screen': B
},
{
swipeEnabled: false,
lazyLoad: false,
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
tabStyle: {
width: 125,
height: 50
},
scrollEnabled: true
}
})
},
Second: {
screen: Second,
// path: 'chat/:user'
path: 'chat'
}
},
{
initialRouteName: 'A',
headerMode: 'screen'
}
);
// combine DrawerPanel
const Router = createDrawerNavigator({
FirstScreen: {
screen: Stack
}
},
{
contentComponent: DrawerPanel,
drawerWidth: 200
});
// about Deep linking
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
const SimpleApp = createAppContainer(Router);
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
export default MainApp;
My React Native dependencies:
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-gesture-handler": "^1.0.9",
"react-navigation": "^3.0.0"
},
Any help would be appreciated. Thanks in advance.
react-native react-navigation
react-native react-navigation
edited Nov 26 '18 at 18:37
micnil
2,73911623
asked Nov 23 '18 at 4:15
徐博俊徐博俊
1,25021638
edited Nov 26 '18 at 18:37
micnil
2,73911623
asked Nov 23 '18 at 4:15
徐博俊徐博俊
1,25021638
edited Nov 26 '18 at 18:37
micnil
2,73911623
edited Nov 26 '18 at 18:37
micnil
2,73911623
edited Nov 26 '18 at 18:37
micnil
2,73911623
2,73911623
asked Nov 23 '18 at 4:15
徐博俊徐博俊
1,25021638
asked Nov 23 '18 at 4:15
徐博俊徐博俊
1,25021638
asked Nov 23 '18 at 4:15
徐博俊徐博俊
1,25021638
1,25021638
Haven't looked at your code too deeply, but i've been stuck for hours with deep linking using react navigation v3, and haven't gotten it working yet. I bet some step is missing from the documentation.
– micnil
Nov 26 '18 at 18:33
1
I think you could simplify your code for the purpose of this question. First remove all styling/options (tabBarOptions, swipeEnabled, headerMode, etc.). Then remove the DrawerPanel, you can useStackas your app container:createAppContainer(Stack);? All your doing is nesting the stack navigator unnecessarily. I really hope you'll get an answer to this :)
– micnil
Nov 26 '18 at 18:50
add a comment |
Haven't looked at your code too deeply, but i've been stuck for hours with deep linking using react navigation v3, and haven't gotten it working yet. I bet some step is missing from the documentation.
– micnil
Nov 26 '18 at 18:33
1
I think you could simplify your code for the purpose of this question. First remove all styling/options (tabBarOptions, swipeEnabled, headerMode, etc.). Then remove the DrawerPanel, you can useStackas your app container:createAppContainer(Stack);? All your doing is nesting the stack navigator unnecessarily. I really hope you'll get an answer to this :)
– micnil
Nov 26 '18 at 18:50
Haven't looked at your code too deeply, but i've been stuck for hours with deep linking using react navigation v3, and haven't gotten it working yet. I bet some step is missing from the documentation.
– micnil
Nov 26 '18 at 18:33
Haven't looked at your code too deeply, but i've been stuck for hours with deep linking using react navigation v3, and haven't gotten it working yet. I bet some step is missing from the documentation.
– micnil
Nov 26 '18 at 18:33
1
1
I think you could simplify your code for the purpose of this question. First remove all styling/options (
tabBarOptions, swipeEnabled, headerMode, etc.). Then remove the DrawerPanel, you can use Stack as your app container: createAppContainer(Stack); ? All your doing is nesting the stack navigator unnecessarily. I really hope you'll get an answer to this :)– micnil
Nov 26 '18 at 18:50
I think you could simplify your code for the purpose of this question. First remove all styling/options (
tabBarOptions, swipeEnabled, headerMode, etc.). Then remove the DrawerPanel, you can use Stack as your app container: createAppContainer(Stack); ? All your doing is nesting the stack navigator unnecessarily. I really hope you'll get an answer to this :)– micnil
Nov 26 '18 at 18:50
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440582%2fcant-set-deep-linking-with-react-navigation-v3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440582%2fcant-set-deep-linking-with-react-navigation-v3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Haven't looked at your code too deeply, but i've been stuck for hours with deep linking using react navigation v3, and haven't gotten it working yet. I bet some step is missing from the documentation.
– micnil
Nov 26 '18 at 18:33
1
I think you could simplify your code for the purpose of this question. First remove all styling/options (
tabBarOptions, swipeEnabled, headerMode, etc.). Then remove the DrawerPanel, you can useStackas your app container:createAppContainer(Stack);? All your doing is nesting the stack navigator unnecessarily. I really hope you'll get an answer to this :)– micnil
Nov 26 '18 at 18:50