Deeplinking

In order to make deeplinks fully working you need to make some platform specific setup. You can find it on iOS and Android native documentations.

Additional iOS setup

After setup dedicated for native side there are still some steps required to properly receive and forward deeplink to JS module you need to add folowing 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 official React-Native documentation on deeplinks.

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

Attach to native lifecycle of component

Add listeners for deeplinks provided to app in background and foreground mode. For each deeplink you can call function openDeeplink on appropriate Storyteller row reference.

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;
            }}
        />
    );
}