const App = () => {
useEffect(() => {
const parseAndSetCallID = (url: string | null) => {
const matchResponse = url?.match(`YOUR REGEX HERE`); // To match the paths and handle them accordingly
if (matchResponse?.length) {
// Your custom setup here.
}
};
const { remove } = Linking.addEventListener('url', ({ url }) => {
parseAndSetCallID(url);
});
const configure = async () => {
const url = await Linking.getInitialURL();
parseAndSetCallID(url);
};
configure();
return remove;
}, []);
};
Deep Linking
This guide talks about deep linking into a video call or a generic application directly. It also focuses on getting the call id or similar entity through a Deep link URL and thereby use it to start a call.
Step 1 - Native Setup
Prerequisites before following this guide is having an application with our Stream Video SDK integrated. You can follow our tutorials for the same to get started with an application.
Step 2 - Using the Linking
API
After the configuration on Android and iOS, we will finally use the Linking API from the React Native to set up handling the link and using it to navigate in the app.
If the app is not already open, it is opened and the URL is passed in as the initialURL.
You can handle these events with getInitialURL() - it returns a Promise that resolves to the URL if there is one.
We then will parse the URL and set our actions accordingly.
If the app is already open, the app is foregrounded, and a Linking url
event is fired. You can handle these events with addEventListener('url', callback)
- it calls callback({url})
with the linked URL.
An example of both is shared below:
You can extract the call ID if its in the URL, start the call using the call ID and navigate to appropriate screen once you have the URL as shown in the example above.
Recap
Please do let us know if you ran into any issues while integrating deep linking using this guide in a video calling app with React Native. Our team is also happy to review your UI designs and offer recommendations on how to achieve it with Stream.
To recap what we’ve learned about Deep Linking:
- We added lines in AndroidManifest and AppDelegate for the app to be able to read the link URLs.
- We added the
apple-app-site-association
file andassetlinks.json
file in our domain to relate our app with the domain. - We handle the links using the built-in Linking API.
We hope this guide helped you. Please do feel free to reach out if you have any suggestions or questions.