Skip to main content
Version: 1.0.1

SDK Usage

Initialize provider in app root​

import { DetourProvider, type Config } from '@swmansion/react-native-detour';

const config: Config = {
  apiKey: process.env.EXPO_PUBLIC_DETOUR_API_KEY!,
  appID: process.env.EXPO_PUBLIC_DETOUR_APP_ID!,
  shouldUseClipboard: true,
  // linkProcessingMode: 'all' // default
};

export default function RootLayout() {
  return (
    <DetourProvider config={config}>
      <RootNavigator />
    </DetourProvider>
  );
}

Use exactly one DetourProvider in your app tree.

If you want complete, runnable integrations for each navigation style, go to Examples.

import { useDetourContext } from '@swmansion/react-native-detour';
import { useEffect } from 'react';
import { useRouter } from 'expo-router';

export function RootNavigator() {
  const { isLinkProcessed, link, clearLink } = useDetourContext();
  const router = useRouter();

  useEffect(() => {
    if (!isLinkProcessed || !link) return;

    router.replace({
      pathname: link.pathname,
      params: link.params,
    });

    clearLink();
  }, [clearLink, isLinkProcessed, link, router]);

  if (!isLinkProcessed) {
    return null;
  }

  return <AppStack />;
}

useDetourContext() returns a link object (or null):

  • link.route: full in-app route with query string (e.g. /details?utm=1)
  • link.pathname: path without query (e.g. /details)
  • link.params: parsed query params record
  • link.url: original URL or raw value
  • link.type: 'deferred' | 'verified' | 'scheme'

Use clearLink() after handling navigation to avoid repeated redirects.

Choose linkProcessingMode​

Config.linkProcessingMode controls which link sources are handled by the SDK:

ValueDeferredUniversal / AppCustom scheme
'all' (default)YesYesYes
'web-only'YesYesNo
'deferred-only'YesNoNo

Use 'deferred-only' when Expo Router +native-intent.tsx already handles runtime and initial URLs.

Expo Router native intent helper​

SDK exposes createDetourNativeIntentHandler from @swmansion/react-native-detour/expo-router.

import { createDetourNativeIntentHandler } from '@swmansion/react-native-detour/expo-router';

export const redirectSystemPath = createDetourNativeIntentHandler({
  fallbackPath: '',
  config: {
    apiKey: process.env.EXPO_PUBLIC_DETOUR_API_KEY!,
    appID: process.env.EXPO_PUBLIC_DETOUR_APP_ID!,
    timeoutMs: 1200,
  },
});

For complete setup with this helper, see expo-router-native-intent in Examples.

Analytics module​

DetourAnalytics emits events that are sent by the active DetourProvider.

import {
  DetourAnalytics,
  DetourEventNames,
} from '@swmansion/react-native-detour';

DetourAnalytics.logEvent(DetourEventNames.Purchase, {
  item: 'subscription_premium',
  currency: 'USD',
});

DetourAnalytics.logRetention('home_screen_opened');

We are Software Mansion.

Hire us