From 5cb2dff706181f1e9a3f49ad9f56fa996946eeca Mon Sep 17 00:00:00 2001 From: Tuan Nguyen Anh Date: Thu, 20 Dec 2018 11:01:14 +0700 Subject: [PATCH 1/4] Update deep-linking.md Update guide about handle "Dynamic Links" with react-navigation "deeplink" --- docs/deep-linking.md | 105 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 105 insertions(+) diff --git a/docs/deep-linking.md b/docs/deep-linking.md index 53f04bff317..2ea806a7929 100644 --- a/docs/deep-linking.md +++ b/docs/deep-linking.md @@ -117,3 +117,108 @@ To test the intent handling in Android, run the following: ``` adb shell am start -W -a android.intent.action.VIEW -d "mychat://mychat/chat/Eric" com.simpleapp ``` + +### Firebase Dynamic Links +In case you want to handle [Dynamic Links](https://rnfirebase.io/docs/v5.x.x/links/reference/links#onLink) to navigate somewhere with `react-navigation` +You should setup like this: + +```javascript + +const AppContainer = createAppContainer( + createSwitchNavigator( + { + AuthLoading, + App: AppTab, + Auth: AuthStack, + ResetPassword: { + path: 'rspass/:token', + screen: ResetPassword + } + }, + { + initialRouteName: 'AuthLoading' + } + ) +) + +// UTILS +export const getDomainName = (url: string): string => { + let hostname + //find & remove protocol (http, ftp, etc.) and get hostname + if (url.indexOf('://') > -1) { + hostname = url.split('/')[2] + } else { + hostname = url.split('/')[0] + } + //find & remove port number + hostname = hostname.split(':')[0] + //find & remove "?" + hostname = hostname.split('?')[0] + hostname = hostname.replace('www.', '') + + return hostname +} +//$FlowFixMe +Array.prototype.remove = function(from: number, to: number) { + var rest = this.slice((to || from) + 1 || this.length) + this.length = from < 0 ? this.length + from : from + return this.push.apply(this, rest) +} +export const extractDeepLinkFromDynamicLink = ( + dynamicLink: string = '' +): string => { + const arr = dynamicLink.split('/').filter(str => str.length) + const hostname = getDomainName(dynamicLink) + arr.forEach((str, index) => { + if ( + str.indexOf('http') === 0 || + str.indexOf('https') === 0 || + str === hostname + ) { + //$FlowFixMe + arr.remove(index, index + 1) + } + }) + return `${hostname}://${arr.join('/')}` +} +// UTILS END + +type Props = {} +const uriPrefix = + Platform.OS === 'android' + ? 'chat://chat/' + : 'chat://' +export default class App extends React.PureComponent { + unsubcribe: Function + constructor(props: Props) { + super(props) + this.unsubcribe = firebase.links().onLink(url => { + const path = extractDeepLinkFromDynamicLink(url) + if (!path.length) { + console.log('nothing to do with empty path') + return + } + Linking.canOpenURL(path) + .then(() => Linking.openURL(path)) + .catch(e => console.log('Unable to handle dynamic link as a deeplink', e)) + }) + } + + componentWillUnmount() { + console.log('DYNAMIC_LINK unsubcribe') + this.unsubcribe() + } + + render() { + return ( + { + NavigationService.setTopLevelNavigator(ref) + }} + /> + ) + } +} + +``` From 289471814337bc159073bc7e06938a7ce901d727 Mon Sep 17 00:00:00 2001 From: Tuan Nguyen Anh Date: Thu, 20 Dec 2018 11:03:33 +0700 Subject: [PATCH 2/4] Update deep-linking.md Change deeplink to match other part of docs --- docs/deep-linking.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/deep-linking.md b/docs/deep-linking.md index 2ea806a7929..2bcec504f96 100644 --- a/docs/deep-linking.md +++ b/docs/deep-linking.md @@ -186,8 +186,8 @@ export const extractDeepLinkFromDynamicLink = ( type Props = {} const uriPrefix = Platform.OS === 'android' - ? 'chat://chat/' - : 'chat://' + ? 'mychat://mychat/' + : 'mychat://' export default class App extends React.PureComponent { unsubcribe: Function constructor(props: Props) { From 3618365a1942ee451671abfafaf57eb8f4f145a9 Mon Sep 17 00:00:00 2001 From: Tuan Nguyen Anh Date: Thu, 20 Dec 2018 11:30:34 +0700 Subject: [PATCH 3/4] Update deep-linking.md Remove unused ref in `AppContainer` --- docs/deep-linking.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/deep-linking.md b/docs/deep-linking.md index 2bcec504f96..f08fecfe162 100644 --- a/docs/deep-linking.md +++ b/docs/deep-linking.md @@ -211,12 +211,7 @@ export default class App extends React.PureComponent { render() { return ( - { - NavigationService.setTopLevelNavigator(ref) - }} - /> + ) } } From 299cdf3eae7a34db86f1ce681ab914a23b2df071 Mon Sep 17 00:00:00 2001 From: Tuan Nguyen Anh Date: Thu, 20 Dec 2018 11:58:37 +0700 Subject: [PATCH 4/4] Update deep-linking.md --- docs/deep-linking.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/deep-linking.md b/docs/deep-linking.md index f08fecfe162..deaf28b81fc 100644 --- a/docs/deep-linking.md +++ b/docs/deep-linking.md @@ -179,6 +179,7 @@ export const extractDeepLinkFromDynamicLink = ( arr.remove(index, index + 1) } }) + if(Platform.OS === 'android') return `${hostname}://${hostname}/${arr.join('/')}` return `${hostname}://${arr.join('/')}` } // UTILS END