Skip to content

Instantly share code, notes, and snippets.

@mshivam019

mshivam019/linking.js

Last active February 14, 2024 19:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mshivam019/fc42aa55d104ea78392173e4205e1f65 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mshivam019/fc42aa55d104ea78392173e4205e1f65 to your computer and use it in GitHub Desktop.
Download ZIP
react native deep linking with v6
Raw
linking.js
export default linking = {
prefixes: [
'https://domain.subdomain.com',
'appScheme://app',
],
config: {
screens: {
initialRouteName: 'yourBaseHomeScreenName',
someScreenName: 'itsRoute',
someOtherScreenName: 'itsRoute',
someParentStackScreenName: {
screens: {
someChildScreenName: {
initialRouteName: 'baseForThisStackScreenName',
screens: {
someScreenName: 'itsRouteWithNestedRoutes/*',
someOtherScreenName: 'itsRoute',
someScreenNameWithRouteParams: {
path: 'itsRoute/:pathParam',
parse: {
pathParam: (pathParam) => pathParam,
},
},
AnotherScreenName: '/*',
},
},
otherChildScreenName: {
initialRouteName: 'baseForThisStackScreenName',
screens: {
someScreenName: 'itsRouteWithNestedRoutes/*',
},
},
},
},
},
},
};
Raw
navigation.jsx
import React, {useRef,useState} from 'react';
import {
NavigationContainer,
useNavigationContainerRef,
} from '@react-navigation/native';
import {Splash} from '../screens';
import linking from './linking';
const Navigation = () => {
const navigationRef = useNavigationContainerRef();
const routeNameRef = useRef();
const [currentRouteName,setCurrentRouteName] = useState(''); //can be used for analytics and debugging
return (
<NavigationContainer
linking={linking}
fallback={<Splash />}
ref={navigationRef}
onReady={() => {
routeNameRef.current = navigationRef.getCurrentRoute().name;
setCurrentScreenName(routeNameRef.current);
}}
onStateChange={() => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.getCurrentRoute().name;
if (previousRouteName !== currentRouteName) {
routeNameRef.current = currentRouteName;
setCurrentScreenName(currentRouteName);
}
}}>
//add your screens/nested navigation here
</NavigationContainer>
);
};
export default Navigation;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment