React Navigation Deep Link Configuration
Configure the linking prop on NavigationContainer with a screen map, so React Navigation automatically navigates to the correct screen when a deep link is opened.
React Navigation Built-In Deep Linking
React Navigation provides built-in deep linking support via a linking prop on the NavigationContainer. When configured, React Navigation automatically handles both cold-start and warm-start URLs by parsing them against a screen map and navigating to the matching screen — you don't need to write URL parsing or Linking API code manually.
This declarative approach is far less error-prone than manual URL handling and integrates seamlessly with the navigation library's state management.
import { NavigationContainer } from '@react-navigation/native';
const linking = {
prefixes: ['myapp://'],
config: {
screens: {
Home: 'home',
Profile: 'profile/:userId',
Settings: 'settings',
},
},
};
<NavigationContainer linking={linking}>
<RootNavigator />
</NavigationContainer>The linking Prop: prefixes and config
The linking prop has two main fields: prefixes (an array of URL prefixes to handle) and config (the screen map). The prefixes array tells React Navigation which URL schemes to intercept. You can include both your custom scheme and your HTTPS domain for universal links.
The config.screens object maps screen component names to URL path patterns. The URL path after the prefix is matched against these patterns to determine which screen to navigate to.
const linking = {
prefixes: [
'myapp://',
'https://www.myapp.com', // universal links too
'https://myapp.com',
],
config: {
screens: {
Home: '', // matches myapp:// (empty path)
Profile: 'profile/:userId', // myapp://profile/123
Product: 'product/:id', // myapp://product/abc
Settings: 'settings', // myapp://settings
},
},
};All lessons in this course
- Configuring Custom URL Schemes
- Linking API and URL Parsing
- React Navigation Deep Link Configuration
- Universal Links (HTTPS Deep Links) on iOS and Android