Deep linking basics in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React Native Linking module.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

ARouter

BNavigator

CLinking

DDeepLink

Attempts:

3 left

💡 Hint

Common Mistakes

Using Navigator or Router instead of Linking

Misspelling Linking

The Linking module is used in React Native to handle deep links.

2fill in blank

medium

Complete the code to add a listener for incoming deep links.

React Native

Linking.addEventListener('[1]', handleDeepLink);

Drag options to blanks, or click blank then click option'

Aurl

Bnavigate

CdeepLink

Dlink

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'link' or 'deepLink' instead of 'url'

Using incorrect event names

The event name for listening to deep link changes is 'url'.

3fill in blank

hard

Fix the error in this code to get the initial URL when the app starts.

React Native

const initialUrl = await Linking.[1]();

Drag options to blanks, or click blank then click option'

AgetInitialURL

BfetchURL

CopenURL

DretrieveURL

Attempts:

3 left

💡 Hint

Common Mistakes

Using openURL which opens a URL instead of getting it

Using fetchURL or retrieveURL which do not exist

The correct method to get the URL that opened the app is getInitialURL().

4fill in blank

hard

Fill both blanks to parse the path from the URL string.

React Native

const url = 'myapp://home/profile';
const path = url.[1]('://')[1].[2]('/');

Drag options to blanks, or click blank then click option'

Asplit

Bslice

CindexOf

Dsubstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using slice or substring which do not split strings into arrays

Using indexOf which returns a number

First, split('://') divides the URL into scheme and path parts. Then, split('/') breaks the path into segments.

5fill in blank

hard

Fill all three blanks to handle a deep link event and extract the URL.

React Native

function handleDeepLink(event) {
  const url = event.[1];
  const route = url.[2]('://')[1].[3]('/')[0];
  console.log('Navigating to:', route);
}

Drag options to blanks, or click blank then click option'

Aurl

Bsplit

Cslice

Dsubstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using event.url() as a function

Using slice or substring instead of split

Accessing wrong event property

The event object has a url property. We use split('://') to separate scheme and path, then split('/') to get the first path segment.