title: How to catch params with React Navigation 5?
body: <p>UPDATE: I did solve this which you can see in my comments shortly after posting.  I am keeping this up in case it helps others or if anyone has a better approach or method.</p>
  <p>My goal is to pass params to the next Screen.  I will show how I have done it without React Navigation 5 so you can see my goal:</p>
  <p>I have a button from one screen like so:</p>
  <pre><code>&lt;Button
      title=&quot;View Card&quot;
      onPress={() =&gt; this.props.navigation.navigate(&quot;CardDetail&quot;, {cardId: 1})}
  /&gt;
  </code></pre>
  <p>This takes me to the other screen CardDetail:</p>
  <p>I show the cardId:</p>
  <pre><code>class CardDetail extends Component {
      render() {
          return(
              &lt;View&gt;
                  &lt;Text&gt;{this.props.route.params.cardId}&lt;/Text&gt;
                  &lt;Text&gt;Card Detail &lt;/Text&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  <p>Now, I have implemented React Navigation but cannot find a way to catch the params.  Here is what I have:</p>
  <pre><code>function Overview({props}) {
      return (
      &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
          &lt;Text&gt;Overview&lt;/Text&gt;
          &lt;Text&gt;{prop}&lt;/Text&gt; // this doesn't work
      &lt;/View&gt;
    );
  }
  
  const Tab = createBottomTabNavigator();
  
  class CardDetail extends Component {
      render() {
          return(
               &lt;Tab.Navigator&gt;
                   &lt;Tab.Screen name=&quot;Overview&quot; component={Overview} /&gt;
               &lt;/Tab.Navigator&gt;
          );
      }
  }
  </code></pre>
  <p>I have tried a few ways:  Here is one</p>
  <pre><code>function Overview({props}) {
      const cardId = React.useState(this.props.route.params.cardId);
      return (
      &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
          &lt;Text&gt;Overview&lt;/Text&gt;
          &lt;Text&gt;{cardId}&lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  <p>Tried adding:</p>
  <pre><code>&lt;Tab.Screen name=&quot;Overview&quot; component={Overview} options={{ title: this.props.route.params.cardId }} /&gt;
  </code></pre>
  <p>This error: <code>label is not a function</code></p>
  <p><strong>Tried doing this method:</strong> This seems like its the most promising
  <a href="https://reactnavigation.org/docs/hello-react-navigation/" rel="nofollow noreferrer">https://reactnavigation.org/docs/hello-react-navigation/</a>
  function Overview(props) {
  const cardId = this.props.route.params.cardId;
  console.log(&quot;sadf&quot;, props);
  return (
  &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
  Overview
  {cardId}
  
  );
  }</p>
  <pre><code>            &lt;Tab.Screen name=&quot;Overview&quot;&gt;
                  {props =&gt; &lt;Overview {...this.props}  /&gt;}
              &lt;/Tab.Screen&gt;
  </code></pre>
  <p>This seems promising but I cannot find a way to actually have it pass to the Overview.</p>
  <p>I have tried passing props through: <code>const Tab = createBottomTabNavigator({props});</code> a handful of ways.  Either nothing happens or it tells me my method isn't accepted in RN5</p>
  <p>Am I even attempting this correctly?</p>
  <p>I've read through the docs of RN5 and tried many ways to pass the params</p>
  <p><a href="https://reactnavigation.org/docs/custom-navigators/" rel="nofollow noreferrer">https://reactnavigation.org/docs/custom-navigators/</a></p>