Deep linking basics in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when a deep link is opened?

In a React Native app configured for deep linking, what is the expected behavior when a user opens a deep link URL that matches a registered route?

A The app navigates directly to the screen associated with the deep link route.

B The app restarts and shows the home screen regardless of the deep link.

C The app crashes because deep linking is not supported by default.

D The app opens the device browser instead of the app.

💡 Hint

Think about what deep linking is designed to do in navigation.

Deep linking allows the app to open directly to a specific screen based on the URL, improving user experience by skipping intermediate screens.

🧠 Conceptual

intermediate

Purpose of URL schemes in deep linking

Why do React Native apps use custom URL schemes or universal links for deep linking?

A To disable navigation within the app.

B To improve app performance by caching screens.

C To prevent users from opening the app accidentally.

D To allow the app to be opened from external sources using specific URLs.

💡 Hint

Consider how apps can be launched from outside themselves.

Custom URL schemes and universal links let other apps or browsers open your app directly to a specific screen using a URL.

📝 Syntax

advanced

Correct deep linking config in React Navigation

Which option shows the correct way to configure deep linking in React Navigation for a screen named 'Profile' with path 'user/:id'?

A const linking = { prefixes: ['myapp://'], config: { screens: { Profile: { path: 'user/:id' } } } };

B const linking = { prefixes: ['myapp://'], config: { screens: { 'user/:id': 'Profile' } } };

C const linking = { prefixes: ['myapp://'], config: { Profile: 'user/:id' } };

D const linking = { prefixes: ['myapp://'], config: { screens: { Profile: 'user/:id' } } };

💡 Hint

Look for the correct nested object structure for screen paths.

React Navigation expects the config to have a screens object where each screen can have a path property as a string.

❓ lifecycle

advanced

Handling deep link when app is already open

What is the recommended way to handle a deep link URL when the React Native app is already running in the background?

A Force close the app and reopen it with the new URL.

B Use an event listener to detect URL changes and navigate accordingly.

C Ignore the deep link because the app is already open.

D Restart the app to process the new deep link.

💡 Hint

Think about how apps listen for new data while running.

React Native apps can listen for URL events to handle deep links dynamically without restarting.

🔧 Debug

expert

Why does this deep link not open the correct screen?

Given this linking config snippet, why does opening 'myapp://profile/123' not navigate to the Profile screen? const linking = { prefixes: ['myapp://'], config: { screens: { Profile: 'user/:id' } } };

A The linking config must be inside the NavigationContainer component.

B The prefixes array is missing the 'https://' prefix.

C The path 'user/:id' does not match the URL segment 'profile/123'.

D The config object is missing a 'path' key inside Profile.

💡 Hint

Check if the URL path matches the configured path exactly.

The URL uses 'profile/123' but the config expects 'user/:id', so the route does not match and navigation fails.