React Native Deeplink Module

Tech Stack

• Framework: React Native with Expo
• Routing: Expo Router (file-based routing)
• Language: TypeScript
• Animations: React Native Animated API
• Safe Area: react-native-safe-area-context
• Status Bar: expo-status-bar

Setup/Usage

Installation

npm install react-native expo expo-router react-native-safe-area-context expo-status-bar

File Structure

app/
  ├── +not-found.tsx      # 404 error screen
  ├── _layout.tsx         # Root layout with tab navigation
  ├── flow.tsx            # Deep link flow visualization
  ├── index.tsx           # Home tab
  ├── generator.tsx       # Generate tab
  ├── tester.tsx          # Test tab
  ├── history.tsx         # History tab
  └── settings.tsx        # Settings (hidden)
src/
  └── theme/             # Design tokens (Colors, Typography, etc.)

Key Components

NotFoundScreen (+not-found.tsx)

• Displays when no route matches the deep link
• Shows attempted URL and list of valid routes
• Includes animated icon badge and status indicator
• "Back to Inspector" button returns to home

RootLayout (_layout.tsx)

• Configures tab navigation with 5 visible tabs
• Hides settings and +not-found screens from tab bar
• Applies consistent styling across all tabs

FlowScreen (flow.tsx)

• Visualizes the deep link processing pipeline
• Shows 5 sequential steps with icons, descriptions, and color coding
• Includes expandable step details and code examples

Styling

All components use the centralized theme system. Customize by modifying src/theme:

Colors.primary        // Primary brand color
Colors.error          // Error state color
Colors.background     // Screen background
Typography.h1Size     // Heading size
Spacing.lg            // Large spacing unit
Radius.lg             // Border radius
Shadow.card           // Card shadow elevation

Navigation

Navigate between tabs using Expo Router's file-based routing:

import { useRouter } from 'expo-router';

const router = useRouter();
router.replace('/');  // Navigate to home

Deep Link Handling

The system integrates with ROUTE_DEFINITIONS from src/utils/deepLinkParser to validate and match incoming deep links against registered routes.

Notes

• Animations use useNativeDriver: false for layout animations (opacity, transforms)
• The 404 screen includes example routes (product, user, settings) that should match your actual app routes
• Tab icons use emoji for lightweight, scalable iconography
• All text respects safe area insets on notched devices