Skip to content

Commit 4b07779

Browse files
committed
Remove section about deprecated dynamic links and add example for push notifications
1 parent ab6dd88 commit 4b07779

File tree

2 files changed

+42
-46
lines changed

2 files changed

+42
-46
lines changed

versioned_docs/version-7.x/deep-linking.md

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -374,56 +374,55 @@ Or if using Expo client:
374374
adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/chat/jane" host.exp.exponent
375375
```
376376

377-
## Third-party integrations
377+
## Integrating with other tools
378378

379-
React Native's `Linking` isn't the only way to handle deep linking. You might also want to integrate other services such as [Firebase Dynamic Links](https://firebase.google.com/docs/dynamic-links), [Branch](https://help.branch.io/developers-hub/docs/react-native) etc. which provide their own API for getting notified of incoming links.
379+
In addition to deep links and universal links with React Native's `Linking` API, you may also want to integrate other tools for handling incoming links, e.g. Push Notifications - so that tapping on a notification can open the app to a specific screen.
380380

381-
To achieve this, you'd need to override how React Navigation subscribes to incoming links. To do so, you can provide your own [`getInitialURL`](navigation-container.md#linkinggetinitialurl) and [`subscribe`](navigation-container.md#linkingsubscribe) functions:
381+
To achieve this, you'd need to override how React Navigation subscribes to incoming links. To do so, you can provide your own [`getInitialURL`](navigation-container.md#linkinggetinitialurl) and [`subscribe`](navigation-container.md#linkingsubscribe) functions.
382+
383+
Here is an example integration with [expo-notifications](https://docs.expo.dev/versions/latest/sdk/notifications):
382384

383385
<Tabs groupId="config" queryString="config">
384386
<TabItem value="static" label="Static" default>
385387

386-
```js name="Third-party integrations"
388+
```js name="Expo Notifications"
387389
const linking = {
388390
prefixes: ['example://', 'https://app.example.com'],
389391

390392
// Custom function to get the URL which was used to open the app
391393
async getInitialURL() {
392-
// First, you would need to get the initial URL from your third-party integration
393-
// The exact usage depend on the third-party SDK you use
394-
// For example, to get the initial URL for Firebase Dynamic Links:
395-
const { isAvailable } = utils().playServicesAvailability;
396-
397-
if (isAvailable) {
398-
const initialLink = await dynamicLinks().getInitialLink();
394+
// First, handle deep links
395+
const url = await Linking.getInitialURL();
399396

400-
if (initialLink) {
401-
return initialLink.url;
402-
}
397+
if (url != null) {
398+
return url;
403399
}
404400

405-
// As a fallback, you may want to do the default deep link handling
406-
const url = await Linking.getInitialURL();
401+
// Handle URL from expo push notifications
402+
const response = await Notifications.getLastNotificationResponseAsync();
407403

408-
return url;
404+
return response?.notification.request.content.data.url;
409405
},
410406

411407
// Custom function to subscribe to incoming links
412408
subscribe(listener) {
413-
// Listen to incoming links from Firebase Dynamic Links
414-
const unsubscribeFirebase = dynamicLinks().onLink(({ url }) => {
415-
listener(url);
416-
});
417-
418-
// Listen to incoming links from deep linking
409+
// Listen to incoming links for deep links
419410
const linkingSubscription = Linking.addEventListener('url', ({ url }) => {
420411
listener(url);
421412
});
422413

414+
// Listen to expo push notifications when user interacts with them
415+
const pushNotificationSubscription =
416+
Notifications.addNotificationResponseReceivedListener((response) => {
417+
const url = response.notification.request.content.data.url;
418+
419+
listener(url);
420+
});
421+
423422
return () => {
424423
// Clean up the event listeners
425-
unsubscribeFirebase();
426424
linkingSubscription.remove();
425+
pushNotificationSubscription.remove();
427426
};
428427
},
429428
};
@@ -432,47 +431,44 @@ const linking = {
432431
</TabItem>
433432
<TabItem value="dynamic" label="Dynamic">
434433
435-
```js name="Third-party integrations"
434+
```js name="Expo Notifications"
436435
const linking = {
437436
prefixes: ['example://', 'https://app.example.com'],
438437

439438
// Custom function to get the URL which was used to open the app
440439
async getInitialURL() {
441-
// First, you would need to get the initial URL from your third-party integration
442-
// The exact usage depend on the third-party SDK you use
443-
// For example, to get the initial URL for Firebase Dynamic Links:
444-
const { isAvailable } = utils().playServicesAvailability;
445-
446-
if (isAvailable) {
447-
const initialLink = await dynamicLinks().getInitialLink();
440+
// First, handle deep links
441+
const url = await Linking.getInitialURL();
448442

449-
if (initialLink) {
450-
return initialLink.url;
451-
}
443+
if (url != null) {
444+
return url;
452445
}
453446

454-
// As a fallback, you may want to do the default deep link handling
455-
const url = await Linking.getInitialURL();
447+
// Handle URL from expo push notifications
448+
const response = await Notifications.getLastNotificationResponseAsync();
456449

457-
return url;
450+
return response?.notification.request.content.data.url;
458451
},
459452

460453
// Custom function to subscribe to incoming links
461454
subscribe(listener) {
462-
// Listen to incoming links from Firebase Dynamic Links
463-
const unsubscribeFirebase = dynamicLinks().onLink(({ url }) => {
464-
listener(url);
465-
});
466-
467-
// Listen to incoming links from deep linking
455+
// Listen to incoming links for deep links
468456
const linkingSubscription = Linking.addEventListener('url', ({ url }) => {
469457
listener(url);
470458
});
471459

460+
// Listen to expo push notifications when user interacts with them
461+
const pushNotificationSubscription =
462+
Notifications.addNotificationResponseReceivedListener((response) => {
463+
const url = response.notification.request.content.data.url;
464+
465+
listener(url);
466+
});
467+
472468
return () => {
473469
// Clean up the event listeners
474-
unsubscribeFirebase();
475470
linkingSubscription.remove();
471+
pushNotificationSubscription.remove();
476472
};
477473
},
478474

versioned_docs/version-7.x/navigating-without-navigation-prop.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Sometimes you need to trigger a navigation action from places where you do not h
1313

1414
- You need to navigate from inside a component without needing to pass the `navigation` prop down, see [`useNavigation`](use-navigation.md) instead. The `ref` behaves differently, and many helper methods specific to screens aren't available.
1515
- You need to handle deep links or universal links. Doing this with the `ref` has many edge cases. See [configuring links](configuring-links.md) for more information on handling deep linking.
16-
- You need to integrate with third party libraries, such as push notifications, branch etc. See [third party integrations for deep linking](deep-linking.md#third-party-integrations) instead.
16+
- You need to integrate with third party libraries, such as push notifications, branch etc. See [Integrating with other tools](deep-linking.md#integrating-with-other-tools) instead.
1717

1818
**Do** use the `ref` if:
1919

0 commit comments

Comments
 (0)