Deeplinking

In order to make deeplinks fully work, you will need to do some platform specific setup. You can find more information in iOS and Android native documents.

Additional iOS Setup

After setup is complete on the native side, to properly receive and forward deeplinks to JS module you need to add the following lines to AppDelegate.m file

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

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
 restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

For further assistance, please refer to the official React Native documentation on deeplinks.

Note: iOS uses only universal links so there is no need for specifying URL schemes in Info.plist file.

Attach to Native Lifecycle of Component

You can add listeners for deeplinks to apps in a background and foreground mode. For each deeplink, you can call function openDeeplink on appropriate Storyteller row references.

private ref?: Storyteller;

...
componentDidMount() {
    //deep link when app is running
    Linking.addEventListener('url', this._handleDeepLink);
    //deep link when app is not running
    AppState.addEventListener('change', this._handleAppStateChange);
}

componentWillUnmount() {
    Linking.removeEventListener('url', this._handleDeepLink);
    AppState.removeEventListener('change', this._handleAppStateChange);
}

_handleAppStateChange = async (_nextAppState: any) => {
    const url = await Linking.getInitialURL();
    if (url !== null && !this.state.didInit) {
        this.setState({ didInit: true });
        this._handleDeepLink({ url });
    }
};

_handleDeepLink = (event: { url: string }) => {
    if (this.ref) {
        this.ref.openDeeplink(event.url);
    }
};

...
render() {
    return (
        <StorytellerRowView
            ...
            ref={(ref) => {
                if (ref) this.ref = ref;
            }}
        />
    );
}