react native navigate to a page with some parameter based on firebase dynamic link (probably just react native link should work the same way)

Viewed 647

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>
  );
}
0 Answers
Related