title: React Navigation getParams in function component
body: <p><strong>Summary of Problem</strong></p>
  
  <p>I'm using functional components in React Navigation and am using NavigationService.navigate from the NavigationService component I created as per their <a href="https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html" rel="nofollow noreferrer">documentation</a>.  I need to pass a param to the destination, which I can do but I don't know how to retrieve the param in the destination screen.</p>
  
  <p>I think I just need to add something to my NavigationService.js file but I'm not sure what it should be and I can't find it in their documentation. </p>
  
  <p><strong><em>Code</em></strong></p>
  
  <p>Code in starting screen</p>
  
  <pre><code>import NavigationService from "~/app/services/NavigationService";
  onPress={() =&gt; NavigationService.navigate("CompScreen", { comp })}
  </code></pre>
  
  <p>NavigationService.js</p>
  
  <pre><code>import {
    NavigationActions,
    DrawerActions,
    StackActions
  } from "react-navigation";
  
  let navigator;
  
  /**
   * @function setTopLevelNavigator
   * @param  {ref} navigatorRef
   */
  function setTopLevelNavigator(navigatorRef) {
    navigator = navigatorRef;
  }
  
  /**
   * @function navigate
   * @param  {string} routeName
   * @param  {any} params
   */
  function navigate(routeName, params) {
    navigator.dispatch(
      NavigationActions.navigate({
        routeName,
        params
      })
    );
  }
  
  /**
   * @function goBack
   * @param {}
   */
  function goBack() {
    navigator.dispatch(NavigationActions.back());
  }
  
  /**
   *
   * @function navigateAndReset
   * @param routeName
   * @param params
   */
  
  //this is to reset the navigation stack.
  function navigateAndReset(routeName, params) {
    navigator.dispatch(
      StackActions.reset({
        index: 0,
        key: null,
        actions: [
          NavigationActions.navigate({
            routeName,
            params
          })
        ]
      })
    );
  }
  
  /**
   * @function openDrawer
   */
  function openDrawer() {
    navigator.dispatch(DrawerActions.openDrawer());
  }
  /**
   * @function closeDrawer
   */
  function closeDrawer() {
    navigator.dispatch(DrawerActions.closeDrawer());
  }
  /**
   * @function toggleDrawer
   */
  function toggleDrawer() {
    navigator.dispatch(DrawerActions.toggleDrawer());
  }
  
  export default {
    navigate,
    openDrawer,
    closeDrawer,
    toggleDrawer,
    goBack,
    navigateAndReset,
    setTopLevelNavigator
  };
  </code></pre>