Handle deep links with multiple environments for the same app on iOs using react-native

Question

I have a react-native app with multiple environments.

Dev, prod, ... Which means that I have multiple 'copies' of the app installed on the phone App Dev, App Prod.

These are under a different bundle identifier:

• com.myapp.dev
• com.myapp.prod

I use deep links to open the app, this works perfect on Android because it asks with which app you want to open it, but on iOS it just opens the first app that founds installed and i can't find the way to, for example:

• Launch develop-app://whatever/1 and open it in the Dev app
• Launch prod-app://whatever/1 and open it in the Prod app

What am i missing?

This are my defined url types:

Also the apple-app-site-association file looks like this:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "1234.com.myapp.dev",
                "paths": ["*"]
            },
            {
                "appID": "1234.com.myapp.prod",
                "paths": ["*"]
            }
        ]
    }
}

Update

• The first problem that i found was that the apple-app-site-association wasn't using a Content-Type header, so, the app could not recognize the file.
• The paths that each environment should recognize should be defined:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "1234.com.myapp.dev",
                "paths": ["/dev/*"]
            },
            {
                "appID": "1234.com.myapp.prod",
                "paths": ["/prod/*"]
            }
        ]
    }
}

• Now i'm able to see the banner on the top of the website Open with App Dev as expected

Answer 1

You have to specify which path is to be opened by which app

For example, your domain is example.com

You have to specify a different path pattern for both dev & prod app in your apple-app-site-association file

For example, you can update your apple-app-site-association file as shown below

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "1234.com.myapp.dev",
                "paths": ["/dev/*"]
            },
            {
                "appID": "1234.com.myapp.prod",
                "paths": ["/prod/*"]
            },
        ]
    }
}

Now, let us say you click on the urls below, you'll be directed to mentioned app in the comments

• https://example.com/dev/123?id=3 // Opens dev app
• https://example.com/dev?id=2 // Opens dev app
• https://example.com/prod/123 // Opens prod app
• https://example.com/prod // Opens prod app
• https://example.com/prod/123?name=john // Opens prod app