I’ve installed react-native-branch in my app, with the help of the new @config-plugins/react-native-branch, and rebuilt iOS and Android custom dev clients.
When I click on a Branch link, Branch can’t find the installed dev client and falls back to opening the App Store / Google Play Store. Clearly, there’s something wrong with my configuration. But what?
The obvious culprit is the URI schema. If I manually create a link (non-Branch) that conforms to this format {scheme}://expo-development-client/?url={manifestUrl}, tapping on the link opens the correct app (wrapped in the dev client).
So in my case, exp+myapp-dev://expo-development-client/?url=http://[IP_ADDRESS]:8081 will open the app (iOS only: Android won’t recognise exp+myapp:// as a link)
So I thought that I’ll use that as my URI schema on Branch.io. However, Branch only allows a limited character set for URI schemas:
I’ve tried a lot of different values for the URI schema on Branch, just guessing what they might be, but none have been right.
Using the listed schema, such as myapp-dev://anything will also open the app (on iOS), but using myapp-dev as the URI schema on Branch will just redirect to App Store / Google Play Store.
Obviously, for the production app the URI schema will be whatever is the schema value in app.config.ts, but what should it be for a custom dev client?
Here’s my app.config.ts in its current state ("I’ve been fiddle with a lot of things, trying to get Branch to work):
export default () => ({
name: isDev ? 'MyApp Dev' : 'MyApp',
slug: isDev ? 'myapp-dev' : 'myapp',
scheme: isDev ? 'myapp-dev' : 'myapp',
ios: {
bundleIdentifier: isDev
? 'com.something.myapp.dev'
: 'com.something.myapp',
associatedDomains: [
'applink:myapp.test-app.link',
'applink:myapp-alternate.test-app.link',
'applink:myapp.app.link',
'applink:myapp-alternate.app.link',
],
},
android: {
package: isDev
? 'com.something.myapp.dev'
: 'com.something.myapp',
config: {
branch: {
apiKey: process.env.BRANCH_API_KEY ?? 'undefined',
},
},
intentFilters: [
// Branch URI scheme
{
action: 'VIEW',
category: ['DEFAULT', 'BROWSABLE'],
data: {
scheme: isDev ? 'myapp-dev' : 'myapp',
host: 'open',
},
},
// Branch app links
{
autoVerify: true,
action: 'VIEW',
category: ['DEFAULT', 'BROWSABLE'],
data: {
scheme: 'https',
host: isDev ? 'myapp.test-app.link' : 'myapp.app.link',
},
},
],
},
plugins: [
[
'@config-plugins/react-native-branch',
{
apiKey: process.env.BRANCH_API_KEY ?? 'undefined',
},
],
],
});