Dynamic Links

[g4laura]

I saw it mentioned in another issue that dynamic links were a possible long term goal but not a priority right now, but I was wondering if anyone could give me any tips about how to set up dynamic links with react native, especially for iOS.

I have receiving dynamic links working well on android but only sometimes on iOS. It works if the app is installed, on some iphones, it doesn't work on others. Also, when the app isn't installed, the dynamic link takes the user to the apple app store, but after the app is open, it doesn't take the user to the screen corresponding to the link.
Also, right now I'm creating the dynamic links with javascript so, they are very long.

If anyone could guide me on how to get dynamic links working, I'd appreciate it.

I don't know Objective C, but I have experience with java.

[chrisbianca]

@g4laura This is still very much on the roadmap and I did start taking a look, but unfortunately got pulled away onto other priorities - multi app support being the main thing we're focusing on at the moment.

The best way to currently get Dynamic Links working on iOS is to make use of a combination of Firebase and the built in React Native linking library (https://facebook.github.io/react-native/docs/linking.html). Follow the setup guide for the Linking library, then:

In your AppDelegate.m, you need to add the following methods:

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<NSString *, id> *)options {
  return [self application:app openURL:url sourceApplication:nil annotation:@{}];
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  FIRDynamicLink *dynamicLink =
  [[FIRDynamicLinks dynamicLinks] dynamicLinkFromCustomSchemeURL:url];
  
  if (dynamicLink) {
    return [RCTLinkingManager application:application
                                  openURL:dynamicLink.url
                        sourceApplication:sourceApplication
                               annotation:annotation];
  }
  
  return [RCTLinkingManager application:application
                                openURL:url
                      sourceApplication:sourceApplication
                             annotation:annotation];
}

Then in your JS code you can add the following when the app mounts:

componentDidMount() {
  // Check if the app was opened from a link
  Linking.getInitialURL()
    .then(url => this.onLink({ url }))
    .catch(err => console.error('An error occurred getting the initial page', err));
  // Register Linking listener
  Linking.addEventListener('url', this.onLink);
}

onLink = ({ url }) => {
  // do something with the URL
}

The JS code should work for Android too.

[Ehesp]

@chrisbianca we could add this to the docs? Just state at the top it's a workaround solution until a full module is built (if it's even needed!)

[chrisbianca]

@Ehesp Yeah, I didn't close the issue to remind me to add to the docs

[g4laura]

Thank you! :)

[royisch]

@g4laura - could you write here the java implementation as well? and in general what are the steps i need to take to still use dynamic links?

[g4laura]

@royisch
For java, if you already have react-native-firebase set up,
Follow the steps here for android in the 'Set up Firebase and the Dynamic Links SDK' and 'Add an intent filter for deep links' sections https://firebase.google.com/docs/dynamic-links/android/receive

I added the intent filter within main activity. It's also a good idea to add the line android:launchMode="singleTask"

  <activity
    android:name=".MainActivity"
    android:launchMode="singleTask"

. Mine looks like this, with my actual app_code where it says app_code and my actual deep link where it says my_deep_link (ie my_app.com):

    <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="app_code.app.goo.gl"
              />
      <data android:scheme="http"
            android:host="app_code.app.goo.gl"
            />
        <data android:scheme="app_code.app.goo.gl/?link=https"
              android:host="my_deep_link"
              />
    </intent-filter> 

Then you can use the React Native Linking library to handle the links in your javascript code. I created my first test links using the Dynamic Links section of the Firebase console and now I just create my links in javascript using this as a reference: https://firebase.google.com/docs/dynamic-links/create-manually

Hope that helps!

[stevenyap]

@g4laura Can you share your Java code on how you pass the Dynamic Link to React Native Linking?

[RedFu01]

Hey @g4laura,
Following your suggestions works for me for opening the app, but on android i will receive null as url through the RN Linking Library. Do you have a fix for that?

[SMJ93]

@chrisbianca does this work for you with universal links? In the Firebase iOS docs (6.) it says to add this code in addition to the URL scheme code you listed above:

- (BOOL)application:(UIApplication *)application
continueUserActivity:(NSUserActivity *)userActivity
 restorationHandler:(void (^)(NSArray *))restorationHandler {

  BOOL handled = [[FIRDynamicLinks dynamicLinks]
             handleUniversalLink:userActivity.webpageURL
             completion:^(FIRDynamicLink * _Nullable dynamicLink,
                          NSError * _Nullable error) {
               // ...
             }];


  return handled;
}

[D1no]

Also would like to check in. Dynamic links are one of the large building blocks missing. Especially since Dynamic Links got recently quite a lot more integration for attribution measurements. http://firebase.googleblog.com/2017/09/whats-new-with-firebase-dynamic-links.html

[g4laura]

@stevenyap
I think the code I posted here was all of the java code I used for dynamic links, I did everything else in react native javascript

@RedFu01
Is it working on iOS?
If it's not working on iOS either.. Are you placing the React Native Linking code in your router? If not, doing that might help..

@SMJ93
I included this:

• (BOOL)application:(UIApplication *)application
  continueUserActivity:(NSUserActivity *)userActivity
  restorationHandler:(void (^)(NSArray *))restorationHandler {
  return [RCTLinkingManager application:application
  continueUserActivity:userActivity
  restorationHandler:restorationHandler];
  }

[dhananjaypuglia]

I have created a npm module for iOS and Android for handling firebase dynamic links. You can look at this url for detail.