React native deep linking routing not working

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);

}