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