/
useLinking.native.tsx
133 lines (114 loc) · 4.01 KB
/
useLinking.native.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import * as React from 'react';
import { Linking, Platform } from 'react-native';
import {
getActionFromState,
getStateFromPath as getStateFromPathDefault,
NavigationContainerRef,
} from '@react-navigation/core';
import type { LinkingOptions } from './types';
import escapeStringRegexp from 'escape-string-regexp';
let isUsingLinking = false;
export default function useLinking(
ref: React.RefObject<NavigationContainerRef>,
{
enabled = true,
prefixes,
config,
getStateFromPath = getStateFromPathDefault,
}: LinkingOptions
) {
React.useEffect(() => {
if (enabled !== false && isUsingLinking) {
throw new Error(
[
'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
"- You are not using both 'linking' prop and 'useLinking'",
"- You don't have 'useLinking' in multiple components",
Platform.OS === 'android'
? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
: '',
]
.join('\n')
.trim()
);
} else {
isUsingLinking = enabled !== false;
}
return () => {
isUsingLinking = false;
};
});
// We store these options in ref to avoid re-creating getInitialState and re-subscribing listeners
// This lets user avoid wrapping the items in `React.useCallback` or `React.useMemo`
// Not re-creating `getInitialState` is important coz it makes it easier for the user to use in an effect
const enabledRef = React.useRef(enabled);
const prefixesRef = React.useRef(prefixes);
const configRef = React.useRef(config);
const getStateFromPathRef = React.useRef(getStateFromPath);
React.useEffect(() => {
enabledRef.current = enabled;
prefixesRef.current = prefixes;
configRef.current = config;
getStateFromPathRef.current = getStateFromPath;
}, [config, enabled, getStateFromPath, prefixes]);
const extractPathFromURL = React.useCallback((url: string) => {
for (const prefix of prefixesRef.current) {
const protocol = prefix.match(/^[^:]+:\/\//)?.[0] ?? '';
const host = prefix.replace(protocol, '');
const prefixRegex = new RegExp(
`^${escapeStringRegexp(protocol)}${host
.split('.')
.map((it) => (it === '*' ? '[^/]+' : escapeStringRegexp(it)))
.join('\\.')}`
);
if (prefixRegex.test(url)) {
return url.replace(prefixRegex, '');
}
}
return undefined;
}, []);
const getInitialState = React.useCallback(async () => {
if (!enabledRef.current) {
return undefined;
}
const url = await (Promise.race([
Linking.getInitialURL(),
new Promise((resolve) =>
// Timeout in 150ms if `getInitialState` doesn't resolve
// Workaround for https://github.com/facebook/react-native/issues/25675
setTimeout(resolve, 150)
),
]) as Promise<string | null | undefined>);
const path = url ? extractPathFromURL(url) : null;
if (path) {
return getStateFromPathRef.current(path, configRef.current);
} else {
return undefined;
}
}, [extractPathFromURL]);
React.useEffect(() => {
const listener = ({ url }: { url: string }) => {
if (!enabled) {
return;
}
const path = extractPathFromURL(url);
const navigation = ref.current;
if (navigation && path) {
const state = getStateFromPathRef.current(path, configRef.current);
if (state) {
const action = getActionFromState(state);
if (action !== undefined) {
navigation.dispatch(action);
} else {
navigation.resetRoot(state);
}
}
}
};
Linking.addEventListener('url', listener);
return () => Linking.removeEventListener('url', listener);
}, [enabled, extractPathFromURL, ref]);
return {
getInitialState,
};
}