Setup app links on a react mobile application

Question

Im actually making a mobile app and i'd to setup links to open it when you click on it. I tried to setup app links but i doesn't seem to work... Here's my code :

Manifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.didierurban.testLenny">
    ...
  <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" android:screenOrientation="portrait">
    ...
      <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="https" android:host="example.net" />
      </intent-filter>
    </activity>
  </application>
</manifest>

My assetlink.json (on https://example.net/.well-known/assetlinks.json)

// 20210407190840
// https://lenny-girardot.fr/.well-known/assetlinks.json

[
  {
    "relation": [
      "delegate_permission/common.handle_all_urls"
    ],
    "target": {
      "namespace": "android_app",
      "package_name": "com.didierurban.testLenny",
      "sha256_cert_fingerprints": [
        "D4:DC:31:60:E9:B2:3F:2B:DF:23:33:31:49:D3:10:9F:3C:3A:6F:E6:1D:41:6E:DB:17:A3:3E:DD:1C:9C:6A:46"
      ]
    }
  }
]

app.json

{
  "expo": {
    "scheme": "...",
    "name": "...",
    "slug": "...",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "..."
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "..."
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

If app links are not working with react, what can i setup to make it work ? I also tried to use https://www.npmjs.com/package/node-deeplink but it seems outdated.

Thank you

Yep i'd like to setup a link that : - Redirect you to a custom URL if the app is not installed (eg. Store link) - Opens the app to the correct content / screen if the app is installed — tycyly
– tycyly, Commented Apr 7, 2021 at 17:35

Josh · Accepted Answer · 2021-04-07 17:48:09Z

on expo, you first need to specify a scheme in your app.json. e.g myawesomeapp.

your manifest file should also have the same scheme like this

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.didierurban.testLenny">
    ...
  <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" android:screenOrientation="portrait">
    ...
      <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="myawesomeapp" />
      </intent-filter>
    </activity>
  </application>
</manifest>

on ios, add it to info.plist here

<key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myawesomeapp</string>
            </array>
        </dict>
    </array>

you can then open links to your app using the url myawesomeapp://

you can also checkout this library for linking to other applications from your react native app

For more info on deep linking in expo, checkout the docs here

Thank you very much for your help but i have a question. If the app is not installed, what will happen ? Nothing ?
@Lenny if the app is not installed, its possible to setup a link to store, or any other alternative, but that need to be handled on either the server, or the app you are linking from, node-deeplink can handle this for you, incase you're using another react-native application to link, you can use the library in added in the answer above. Thanks
Node-deeplink is still working ? When i try to make this my browser block the redirect casimages.com/i/210407082756807023.png.html Here's my code app.get('/deeplink', deeplink({ url: "demo://form/555", fallback: 'https://cupsapp.com', android_package_name: 'pkg.name', ios_store_link: 'https://itunes.apple.com/us/app/cups-unlimited-coffee/id556462755?mt=8&uo=4' }) ) and once again, thanks for the help !
@Lenny can't read the language so not able to really figure out the problem, but yeah its possible node-deeplink is no longer maintained, but i believe there may be other free or premium alternatives out there. You're welcome too. feel free to accept the answer if its solves your issue
well it says "navigation is blocked" i can't use it so, i'll the the ticket open for few hours if anyone has a solution, otherwise i'll accept your answer.

Collectives™ on Stack Overflow

Setup app links on a react mobile application

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related