React native deep linking routing not working - react-native

Question

I am using dynamic links for deep linking.
const linking = {
prefixes: [
www.example.com
],
config: {
screens: {
Chat: {
path: ":id",
parse: {
id: (id) => `${id}`,
},
},
Profile: 'user',
},
},
};
function App() {
return (
<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
<Stack.Screen name="Chat" component={ChatScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</NavigationContainer>
);
}
www.example.com/user always route to the ChatScreen screen. I want to route in ProfileScreen. How to handle config file in linking?

Answer 1

Set your config as
const config = {
screens: {
Profile: '/user',
Chat:'/chat/:id'
},
};
your linking should be
const linking = {
prefixes: [
'www.example.com',
],
config,
};
By doing so, www.example.com/user will be routed to ProfileScreen component. www.example.com/chat/:<some id> will take you to ChatScreen with route param as id.
Update: It seems you are trying to go to ChatScreen by www.example.com/<some id> and also have www.example.com/user to load ProfileScreen. The problem is React navigation considers string "user" as param id and takes you to ChatScreen itself. That is the reason I added "chat" in the path of ChatScreen.
If you really want to use www.example.com/<some id> to load ChatScreen, you can use getStateFromPath and write your own logic to differentiate between ids and path names. To do that, your linking will be
const linking = {
prefixes: [
'www.example.com',
],
config,
getStateFromPath: (path, options) => {
if (path ==='/user') {
return {routes: [{ name: 'Profile' }],
} ;
} else {
return {routes: [{ name: 'Chat',params:{id:getIdFromPath(path)} }],
} ;
}
},
};
here checkIfValidPath is for checking whether the url path is an actual id or "user". getIdFromPath is to extract id from the url. I havent tested this, but this should work.
const checkIfValidPath=(path)=>{
return path !=='www.example.com/user';
}
const getIdFromPath =(path)=>{
return path.slice(1, path.length);
}

Answer 2

This worked for me
const getIdFromPath = (path) => { return path.slice(1, path.length); }
const linking = {
prefixes: [
www.example.com
],
config: {
screens: {
Chat: {
path: ":id",
parse: {
id: (id) => `${id}`,
},
},
Profile: 'user',
},
},
getStateFromPath: (path, options) => {
if (path === '/user') {
return { routes: [{ name: 'Profile' }], };
}
else {
return { routes: [{ name: 'Chat', params: { id: getIdFromPath(path) } }], };
}
}
};
function App() {
return (
<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
<Stack.Screen name="Chat" component={ChatScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</NavigationContainer>
);
}