Deep linking basics in React Native - Mini App: Build & Ship

Build: HomeScreen

This screen welcomes the user and shows a button to navigate to a Details screen. The app supports deep linking so that opening a special URL opens the Details screen directly.

Target UI

-------------------
|     HomeScreen   |
|                  |
|  Welcome!        |
|                  |
|  [Go to Details] |
-------------------

Create two screens: HomeScreen and DetailsScreen

Add a button on HomeScreen to navigate to DetailsScreen

Configure deep linking so that opening the URL myapp://details opens DetailsScreen

Show a simple text on DetailsScreen: 'This is the Details Screen'

Use React Navigation for navigation

Starter Code

React Native

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome!</Text>
      {/* TODO: Add button to navigate to DetailsScreen */}
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>This is the Details Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Task 1

Task 2

Solution

React Native

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Home: '',
      Details: 'details'
    }
  }
};

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome!</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>This is the Details Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

We added a Button on the HomeScreen that navigates to the DetailsScreen when pressed. This lets users move between screens inside the app.

To support deep linking, we defined a linking configuration object. It tells React Navigation to listen for URLs starting with myapp://. The path details maps to the Details screen.

We passed this linking config to NavigationContainer. Now, if the app is opened with the URL myapp://details, it will open the DetailsScreen directly.

This setup helps users open specific parts of the app from outside, like from a browser or another app.

Final Result

Completed Screen

-------------------
|     HomeScreen   |
|                  |
|  Welcome!        |
|                  |
|  [Go to Details] |
-------------------

-------------------
|   DetailsScreen  |
|                  |
|  This is the     |
|  Details Screen  |
|                  |
-------------------

Tapping 'Go to Details' button navigates to DetailsScreen

Opening URL 'myapp://details' opens the app directly on DetailsScreen

Stretch Goal

Add a third screen called ProfileScreen and support deep linking to 'myapp://profile'. Add a button on HomeScreen to navigate to ProfileScreen.

💡 Hint

Add ProfileScreen to the stack navigator and update the linking config with 'Profile: "profile"'. Add a button on HomeScreen that navigates to 'Profile'.