How can I implement deep linking in React Navigation v6?

How can I implement deep linking in React Navigation v6?

To implement deep linking in React Navigation v6, you need to set up a linking configuration in your navigation container.

What does the linking configuration look like?

The linking configuration is an object that defines the prefixes and the screens. For example:

const linking = {
  prefixes: ['https://myapp.com', 'myapp://'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile/:id',
    },
  },
};

How do I handle incoming links?

You can handle incoming links by using the onReady prop of the navigation container to listen for deep links.

Can you give me an example of handling a link?

Sure! You can use the Linking API from React Native to add an event listener for incoming links like this:

import { Linking } from 'react-native';

useEffect(() => {
  const handleDeepLink = (url) => {
    // Handle the deep link URL
  };

  const unsubscribe = Linking.addEventListener('url', ({ url }) => handleDeepLink(url));
  return () => unsubscribe.remove();
}, []);