Deep linking basics in React Native - UI Render Trace

Component - Deep linking basics

This React Native component demonstrates basic deep linking. It listens for a URL that opens the app and shows the linked path on screen. This helps users jump directly to specific app content from outside.

Widget Tree

App (Functional Component)
├─ View (container)
│  ├─ Text (title)
│  ├─ Text (instructions)
│  └─ Text (display deep link URL path)

The root is the App functional component. Inside it is a View container holding three Text components: a title, instructions, and the current deep link path shown to the user.

Render Trace - 5 Steps

Step 1: App

Step 2: View

Step 3: Text (title)

Step 4: Text (instructions)

Step 5: Text (urlPath)

State Change - Re-render

Trigger:User opens the app via a deep link URL (e.g., myapp://profile/123)

Before

urlPath state is empty string ''

→

After

urlPath state updates to '/profile/123'

Re-renders:App component and its children re-render to show updated urlPath text

UI Quiz - 3 Questions

What happens when the app receives a deep link URL?

A The urlPath state updates and the displayed path changes

B The app closes automatically

C Nothing changes on the screen

D The app navigates to a new screen automatically

Key Insight

Deep linking lets users open your app directly to specific content. React Native's Linking API helps listen for these URLs and update UI state. Showing the linked path clearly helps users understand where they landed.