Home > Back-end >  React Native deep linking is not working on real device
React Native deep linking is not working on real device

Time:12-11

I use uri-scheme for environment setup and testing and follow the steps from React Navigation Doc to set up navigation. When I test on the emulator by npx uri-scheme open myapp://do_something/some_params --{android/ios} everything looks good. It works when the app is running foreground, background, or closed. However, when I try on my phone, nothing happens.

I try clicking the link in the email, nothing happens. In the browser address bar, I try typing the uri myapp://do_something/some_params. The browser is still on the homepage, and no 'open myapp' popup.

AndroidManifest.xml:

...
   <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen">
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="myapp"/>
      </intent-filter>
    </activity>
...

Info.plist:

...
        <array>
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>myapp</string>
                </array>
            </dict>
        </array>
...

AppDelegate.m:

#import <React/RCTLinkingManager.h>

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

App.js:

const deepLinkingConfig = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      HOME: {
        screens: {
          SOMESCREEN: 'do_something/:some_params',
        }
      }
    },
  },
}
...
<NavigationContainer linking={deepLinkingConfig}>
    ...
<NavigationContainer />
...

I can't find anything wrong.

CodePudding user response:

You should create a small sample HTML page that contains the link and open this page in your Browser. If you enter the link into the browser deeplinking is not called, only by clicking the link. Also not all apps (like maybe your mail client) support deep linking. Furthermore you should first start your app with the configuration and then give the system a little bit time (up to a minute) to register the change. If nothing works try uninstall and re-install. Deeplinking unfortunately has some weaknesses.

CodePudding user response:

It won’t be clickable until you provide a real http schema for your app

You must configure universal links, see here: React Native url deep linking like YouTube

iOS: https://www.raywenderlich.com/6080-universal-links-make-the-connection

Android: https://developer.android.com/training/app-links

Also take a look at Firebase Dynamic Links: https://firebase.google.com/products/dynamic-links?gclid=EAIaIQobChMI7Nixubba9AIVxrLVCh0m4wFnEAAYASAAEgI0nfD_BwE&gclsrc=aw.ds

  • Related