I am building an app with react native and I used firebase dynamic link to open the app. it works well but I want the user to navigate to a specific screen with some parameter I want to pass along when the app opens by responding to link.
Below is how my app.js looks like. this code is getting triggered every time I am clicking the link. now I want to navigate to some specific screen that will accept some parameters. e.g. navigation.navigate('Profile',{param1:'xyz', param2:'sdfds'}) but i am not sure how i can make it work. I could put this dynamic link handler in my initial route (Main screen as per below), but I tried it once and it did not quite work. I will try again but was wondering if there are some pointers?
import dynamicLinks from '@react-native-firebase/dynamic-links';
export default function App() {
const Stack = createStackNavigator();
const handleDynamicLink = link => {
dynamicLinks()
.getInitialLink()
.then(link => {
console.log(JSON.stringify(link) + 'i got triggered and app was open');
if (link.url === 'https://myapp.page.link/welcome') {
console.log('i got triggered and app was open');
//Stack.Navigator.initialRouteName = MenuScreen;
//navigation.navigate('Profile');
// ...set initial route as offers screen
}
});
// Handle dynamic link inside your own application
if (link.url === 'https://myapp.page.link/welcome') {
// ...navigate to your offers screen
console.log('i got triggered and app was closed');
//navigation.navigate('Profile');
}
};
useEffect(() => {
const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
// When the is component unmounted, remove the listener
return () => unsubscribe();
}, []);
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: 'orange',
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<Stack.Screen name="Menu" component={HomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Store" component={StoreScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}