CODEWITHSUNDEEP
react-nativedeep-linkingfirebase-dynamic-links
Shivam
Shivam

Reputation: 2359

React native deep linking routing not working

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?

Upvotes: 3

Views: 3911

Answers (2)

sandarshnaroju
sandarshnaroju

Reputation: 581

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

}

Upvotes: 3

Shivam
Shivam

Reputation: 2359

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

Upvotes: 1

Related Questions