'How to handle deeplinks in react
I am trying to implement deeplinks in my app using firestore's dynamic links. When the app is opened using a deeplink, I want to show a modal to the user. I am new to react and I am not sure how to implement this. When the app is opened using the dynamic link, I can get the link in App.js
useEffect(() => {
const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
return () => unsubscribe();
}, []);
const handleDynamicLink = link => {
//Show Modal
};
return (
<RootStoreProvider value={rootStore}>
<SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
<IconRegistry icons={EvaIconsPack} />
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<ApplicationProvider {...eva} theme={eva[theme]}>
{!rootStore.authStore.isLoggedIn && !startedPressed ? <WelcomeSliderScreen pressed={getStartedPressed}></WelcomeSliderScreen> :
<RootNavigator
ref={navigationRef}
initialState={initialNavigationState}
onStateChange={onNavigationStateChange}
/>
}
</ApplicationProvider>
</ThemeContext.Provider>
</SafeAreaProvider>
</RootStoreProvider>
)
}
What is the best way to implement this logic? I started to implement a deepLinkStore but now a start the think that this is not the best solution
const handleDynamicLink = link => {
rootStore && rootStore.linkStore.setDeepLink(link);
};
The problem is that rootStore is sometimes null there, I don't understand why. Shall I just provide a parameter in RootNavigator? Something like this
const [deepLink, setDeepLink] = React.useState(null)
const handleDynamicLink = (link) => {
setDeepLink(link);
}
<RootNavigator
ref={navigationRef}
initialState={initialNavigationState}
onStateChange={onNavigationStateChange}
deepLink={deepLink}
/>
Is this the way to go? How can I access the deepLink parameter in a functional component?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
