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.

Practice

1. What is the main purpose of deep linking in a React Native app?

easy

A. To create animations between screens

B. To open specific screens in the app from external links

C. To improve app performance by caching data

D. To handle user authentication automatically

Solution

1. Step 1: Understand deep linking concept

   Deep linking allows apps to open specific screens directly from a URL or link.

2. Step 2: Identify the main purpose

   This helps users navigate directly to content without opening the app's home screen first.

3. Final Answer:

   To open specific screens in the app from external links -> Option B

4. Quick Check:

   Deep linking = open specific screens [OK]

Hint: Deep linking opens app screens from links [OK]

Common Mistakes:

• Confusing deep linking with app performance
• Thinking it handles animations
• Assuming it manages authentication

2. Which React Native API is used to listen for incoming deep links?

easy

A. AsyncStorage

B. Navigation

C. Linking

D. Animated

Solution

1. Step 1: Recall React Native APIs

   React Native provides the Linking API to handle URLs and deep links.

2. Step 2: Match API to deep linking

   Linking listens for URL events and opens the app screen accordingly.

3. Final Answer:

   Linking -> Option C

4. Quick Check:

   Linking API = deep link listener [OK]

Hint: Use Linking API to handle URLs [OK]

Common Mistakes:

• Choosing Navigation which manages screen transitions
• Confusing with AsyncStorage for data storage
• Picking Animated which is for animations

3. What will happen when this code runs and the app receives the URL myapp://profile/123?

Linking.addEventListener('url', (event) => {
  console.log(event.url);
});

medium

A. It logs 'myapp://profile/123' to the console

B. It throws a syntax error

C. It opens the profile screen automatically

D. It does nothing because the listener is incorrect

Solution

1. Step 1: Understand the event listener

   The code listens for 'url' events and logs the event.url string.

2. Step 2: Analyze the URL received

   When the app receives 'myapp://profile/123', the listener logs this exact string.

3. Final Answer:

   It logs 'myapp://profile/123' to the console -> Option A

4. Quick Check:

   Listener logs URL = correct output [OK]

Hint: Listener logs incoming URL string [OK]

Common Mistakes:

• Assuming it opens screen automatically without navigation code
• Thinking the code has syntax errors
• Believing the listener does nothing

4. Identify the error in this deep linking setup code:

Linking.addEventListener('url', handleUrl);

function handleUrl(event) {
  console.log(event);
}

// Later
Linking.removeEventListener('url', handleUrl);

medium

A. removeEventListener should be called with a different event name

B. addEventListener requires a second argument as a string

C. handleUrl function should return a value

D. removeEventListener is deprecated; use remove() on the subscription

Solution

1. Step 1: Check React Native Linking API usage

   In recent React Native versions, addEventListener returns a subscription object with a remove() method.

2. Step 2: Identify correct removal method

   removeEventListener is deprecated; you should call subscription.remove() instead.

3. Final Answer:

   removeEventListener is deprecated; use remove() on the subscription -> Option D

4. Quick Check:

   Use subscription.remove() not removeEventListener [OK]

Hint: Use subscription.remove() to stop listening [OK]

Common Mistakes:

• Calling removeEventListener which is deprecated
• Expecting handleUrl to return a value
• Passing wrong argument types to addEventListener

5. You want your React Native app to open the screen showing details for a product when a user clicks a link like myshop://product/42. Which steps are necessary to implement this deep linking behavior correctly?

hard

A. Configure URL scheme in app settings, listen for URL events, parse product ID, navigate to product screen

B. Only listen for URL events and log them; navigation happens automatically

C. Use AsyncStorage to save the URL, then read it on app start

D. Set up a web server to redirect links to the app

Solution

1. Step 1: Configure app to handle custom URL scheme

   You must set up your app to recognize 'myshop://' links in platform config files.

2. Step 2: Listen for URL events and parse the product ID

   Use Linking API to detect incoming URLs and extract the product ID from the URL path.

3. Step 3: Navigate to the product screen with the parsed ID

   Use your navigation library to open the product detail screen with the correct ID.

4. Final Answer:

   Configure URL scheme in app settings, listen for URL events, parse product ID, navigate to product screen -> Option A

5. Quick Check:

   Full deep linking setup = Configure URL scheme in app settings, listen for URL events, parse product ID, navigate to product screen [OK]

Hint: Setup scheme, listen URL, parse, navigate [OK]

Common Mistakes:

• Assuming navigation happens automatically without code
• Using AsyncStorage instead of URL handling
• Thinking a web server is needed for deep linking