How to share a deep link on social networks [React Native] How to share a deep link on social networks [React Native]

How to share a deep link on social networks [React Native]

If you’ve encountered challenges while sharing deep links on social networks in React Native, especially with URLs that are specific to your app (e.g., myapp://app/1), you’re not alone. Fortunately, there is a solution, and in this article, we’ll guide you through the process.

Using react-native-share Library

Initially, you may have tried using the react-native-share library but faced issues as the message appeared as a simple string rather than a clickable hyperlink. To address this, you can follow these steps:

AndroidManifest.xml Configuration

Open your AndroidManifest.xml file and add the following intent filter within the <activity> section:

<activity
      [...]
      <intent-filter android:label="filter_react_native">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="http"
              android:host="www.your-domain.com"
              android:pathPrefix="/new/9/read" />
        <data android:scheme="appname"
              android:host="yourhost" />
      </intent-filter>
    

Linking API in React Native

Now, you can utilize the Linking API provided by React Native to handle deep links. Incorporate the following code, for example, in the componentDidMount() lifecycle method:

componentDidMount() {
  Linking.getInitialURL().then((url) => {
    if (url) {
      console.log('Initial url is: ' + url);
    }
  }).catch(err => console.error('An error occurred', err));
}
    

This code snippet checks for the initial URL when the component mounts and logs it to the console. Adjust it based on your specific requirements.

Conclusion

By configuring the AndroidManifest.xml file and leveraging the Linking API in React Native, you can successfully share deep links on social networks. This approach ensures that your app-specific URLs are recognized as clickable links, allowing seamless redirection to your app when opened on a web browser.

Now you’re equipped to enhance the user experience when sharing deep links from your React Native app on platforms like Twitter, Facebook, and WhatsApp.