'React-Native deep linking not working with nested Navigation
Versions:
"@react-navigation/bottom-tabs": "^5.11.10",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.4",
"react": "17.0.1",
"react-native": "^0.64.3",
I am working on React Native Application. Below is the Structure.
I try my best however every time when i try to reach any path e.g. "adb shell am start -W -a android.intent.action.VIEW -d "test://devices" com.myappname.app"
or
"adb shell am start -W -a android.intent.action.VIEW -d "test://feed" com.myappname.app"
this only Opens App and Nothing Happens forward to that. Ideally it should reach to that screen, correct ?
Am getting no error msg which is driving me crazy. I know am missing something very small, but what it is ? Can someone check the config structure..? Any Lead or help will be appreciated.
Navigations/index.js
<NavigationContainer linking={Linking}>
{isAuthenticated ? (
isRegCompleted ? (
<HomeNavigator /> //Home Navigation
) : (
<EnterPersonalDetails />
)
) : (
<AuthNavigator /> //Auth Navigation
)}
</NavigationContainer>
Linking.js
const config = {
screens: {
HomeNavigator: {
screens: {
TABS: {
screens: {
Devices: 'devices',
Feed: 'feed',
},
},
}
},
}
};
const Linking = {
prefixes: ["test://"],
config,
};
export default Linking;
HomeNavigator.js
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const HomeNavigator = () => {
const {
dashboardDispatch,
authState: {language},
} = useContext(GlobalContext);
return (
<Stack.Navigator>
<Stack.Screen
name={TABS}
children={() => TabNavigator(language)}
options={{
title: language.AUTOFARM,
headerBackTitleVisible: false,
headerShown: false,
}}
/>
<Stack.Screen
name={RECORDS}
component={Records}
options={{
title: language.RECORDS,
headerShown: false,
headerBackTitleVisible: false,
}}
/>
<Stack.Screen
name={DEVICEDATA}
component={deviceData}
options={{
title: language.DEVICE_DATA,
headerShown: false,
headerBackTitleVisible: false,
}}
/>
</Stack.Navigator>
);
const TabNavigator = language => {
return (
<SafeAreaView style={{flex: 1}}>
<Tab.Navigator
initialRouteName={Devices}
mode={'modal'}
backBehavior={'none'}
tabBarOptions={{
activeTintColor: colors.primary,
showIcon: true,
tabStyle: {paddingTop: 10},
safeAreaInsets: {bottom: 10},
keyboardHidesTabBar: true,
}}>
<Tab.Screen
name={DEVICES}
component={Devices}
options={{
tabBarIcon: ({color, size}) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
tabBarLabel: language.HOME,
path: 'devices'
}}
/>
<Tab.Screen
name={FEED}
component={Feed}
options={{
tabBarLabel: language.FEED,
tabBarIcon: ({color, size}) => (
<MaterialCommunityIcons
name="page-previous"
color={color}
size={size}
/>
),
path: 'feed'
}}
/>
</Tab.Navigator>
</SafeAreaView>
);
};
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
