Deeplinks

Lucra supports deep links for navigating into specific flows. There are two parts:

1. Outgoing links: Lucra asks you to pack a Lucra deep link inside your provider.

2. Incoming links: Your app forwards deep links back to Lucra so it can take over navigation.

Outgoing Deep Link Provider

Register a provider to convert Lucra deep links into your app's preferred format (short links, branded domains, etc.).

import { registerDeepLinkProvider } from '@lucra-sports/lucra-react-native-sdk';
import { linkShortener } from 'my-link-shortener';

registerDeepLinkProvider(async (lucraDeepLink) => {
  const shortenedDeepLink = await linkShortener(lucraDeepLink);
  return shortenedDeepLink;
});

Handling Incoming Deep Links

Unpack your incoming link and hand it to Lucra for matching:

import { LucraSDK } from '@lucra-sports/lucra-react-native-sdk';
import { Linking } from 'react-native';
import { linkExpander } from 'my-link-shortener';

const linkingSubscription = Linking.addEventListener('url', async ({ url }) => {
  const deepLink = await linkExpander(url);
  const handled = await LucraSDK.handleLucraLink(deepLink);
  if (handled) {
    // Lucra will present the appropriate flow
    return;
  }
});

const initialLink = await Linking.getInitialURL();
if (initialLink) {
  const deepLink = await linkExpander(initialLink);
  await LucraSDK.handleLucraLink(deepLink);
}

iOS Linking Configuration

If you use React Native Linking, forward openURL to RCTLinkingManager and allow Lucra to handle Venmo callbacks if needed:

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {
  [[LucraClient sharedInstance] handleVenmoUrl:url];
  return [RCTLinkingManager application:application openURL:url options:options];
}

Firebase Dynamic Links (iOS, New Architecture)

On iOS with the new architecture, dynamic links can fail when the app is closed. Work around this by resolving the initial URL via Linking and then passing to dynamicLinks().resolveLink.

import { Linking, Platform } from 'react-native';
import dynamicLinks from '@react-native-firebase/dynamic-links';

if (Platform.OS === 'ios') {
  Linking.getInitialURL().then((res) => {
    dynamicLinks()
      .resolveLink(res || '')
      .then((link) => {
        handleDeepLink({ url: link.url });
      });
  });
}

Managing App State

If the app opens from background, you may want to store the link until UI is ready:

import { AppState } from 'react-native';
import { LucraSDK } from '@lucra-sports/lucra-react-native-sdk';

export function DeepLinkManager() {
  const savedDeepLink = useRef('');

  useEffect(() => {
    const appStateListener = AppState.addEventListener('change', async (next) => {
      if (next === 'active' && savedDeepLink.current) {
        await LucraSDK.handleLucraLink(savedDeepLink.current);
      }
    });

    const handleDeepLink = async ({ url }: { url: string }) => {
      if (AppState.currentState !== 'active') {
        savedDeepLink.current = url;
        return;
      }
      await LucraSDK.handleLucraLink(url);
    };

    return () => {
      appStateListener.remove();
    };
  }, []);

  return null;
}

Avoid Calling Lucra Before Init

If your app processes deep links on launch, guard the handler until LucraSDK.init has completed. A simple approach is to conditionally render your deep link manager once the SDK is ready:

const App = () => {
  return !isReady ? (
    <Text>Loading...</Text>
  ) : (
    <>
      <DeepLinkManager />
      {/* Other components */}
    </>
  );
};