Configuring deep linking to a parameterized screen
end-to-end deep link setup.
register native URL schemes/intent filters, define a linking config with prefixes and screen-to-path mapping including params, pass it to NavigationContainer.
WHAT THIS TESTS Whether you understand deep linking is two layers: the operating system must route a URL to your app, and React Navigation must map that URL to a screen and params. Many candidates only know the JavaScript half.
A GOOD ANSWER COVERS Native setup first: on iOS add the custom scheme under CFBundleURLTypes and configure associated domains for universal https links; on Android add an intent filter with the scheme and host, plus App Links with autoVerify for https. Then in JavaScript build a linking object with prefixes such as myapp:// and your https domain, and a screens map where Post maps to the path posts/:id. Pass linking to NavigationContainer, optionally with a fallback while it resolves. React Navigation parses the incoming URL, extracts 123 into route.params.id, and pushes the Post screen. Handle both the cold-start case, where the initial URL launched the app, and the resume case while the app is already running.
COMMON WRONG ANSWERS Writing only the JS screens config and assuming links work, when the OS never delivers the URL without native registration. Confusing custom schemes (myapp://) with universal or App Links (https), which need domain verification. Forgetting to parse the path segment into a param. Not handling the initial URL on cold start, so links only work when the app is already open.
LIKELY FOLLOW-UPS How do universal links differ from custom schemes and why prefer them? How do you test deep links with adb or xcrun simulator commands? How does authentication interact with a link that targets a protected screen?
ONE CONCRETE EXAMPLE Your linking config has prefixes: ['myapp://', 'https://posts.example.com'] and screens: { Post: 'posts/:id' }. When the OS hands your app myapp://posts/123, React Navigation matches the path, navigates to Post, and the screen reads route.params.id, which is the string '123', then fetches that post. Tapping a verified https link to the same path resolves identically through the universal-link path.
Read the original → reactnative.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.