title: Navigation with parameters from custom element in Flatlist in React Native: Error: Invalid hook call
body: <p>I am new to react native and have a problem figuring out how to navigate from one class to another one with passing parameters and would appreciate your help.</p>
  <p>All I want to do is:</p>
  <ol>
  <li>ClassA should have a checkbox with state handling and a flatlist containing CustomButton</li>
  <li>Navigate from ClassA to TargetScreen by clicking CustomButton</li>
  <li>Pass parameter &quot;element&quot; to TargetScreen</li>
  <li>Show content of parameter passed in TargetScreen</li>
  </ol>
  <p>The error message I get:</p>
  <blockquote>
  <p>Error: Invalid hook call. Hooks can only be called inside of the body
  of a function component. This could happen for one of the following
  reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app See <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html" rel="nofollow noreferrer">https://reactjs.org/warnings/invalid-hook-call-warning.html</a> for tips about how to debug and
  fix this problem.</li>
  </ol>
  </blockquote>
  <p>ClassA:</p>
  <pre><code>import React, { Component, useState } from 'react';
  import { useNavigation } from '@react-navigation/native';
  import { CustomButton} from './CustomButton.js';
  import { CheckBox, SafeAreaView, FlatList} from 'react-native';
  
  class ClassA extends React.Component {
  
        render() {
  
          const [ASelected, setA] = useState(false);
  
          const NavigateWithParams = () =&gt; {
              navigation = useNavigation();
              this.props.navigation.navigate('TargetScreen', { element: 'elementname' })
          }
  
          const renderItemCustom= ({ item }) =&gt; (
              &lt;CustomButton onPress={() =&gt; navigateWithParams()} /&gt;
          );
  
         }
  
       return (
             &lt;CustomConst/&gt;
             &lt;CheckBox value={ASelected}
               onValueChange={{setA}} /&gt;
             &lt;SafeAreaView&gt;
                      &lt;FlatList
                          data={data}
                          renderItem={renderItemCustom}
                          keyExtractor={(item) =&gt; item.element}
                      /&gt;
             &lt;/SafeAreaView&gt;
       );
   }
  
  export default ClassA;
  </code></pre>
  <p>TargetScreen:</p>
  <pre><code>class TargetScreen extends React.Component {
  
      render() {
         
          const { navigation } = this.props;
  
          return (
              
              &lt;Text&gt; {JSON.stringify(navigation.getParam('element'))} &lt;/Text&gt;
          );
      }
    
  
  }
  
  export default TargetScreen;
  </code></pre>
  <p>+++++++++++++++++++++++++
  Update:</p>
  <p>As of now the code looks like this:</p>
  <pre><code>class ClassA extends React.Component {
      NavigateWithParams = (element) =&gt; {
          this.props.navigation.navigate('TargetScreen', { element: 'elementname' })
      }
  
      renderItemCustom = ({ item }) =&gt; (
          &lt;CustomButton element={item.title} onPress={() =&gt; this.NavigateWithParams(item.element)} /&gt;
      );
      
      render() {
  
          return (
             
                      &lt;SafeAreaView&gt;
                          &lt;FlatList
                              data={data}
                              renderItem={this.renderItemCustom}
                              keyExtractor={(item) =&gt; item.id}
                          /&gt;
                      &lt;/SafeAreaView&gt;
  
          );
      }
  }
  
  export default ClassA;
  </code></pre>
  <p>And I am now getting this issue:</p>
  <blockquote>
  <p>TypeError: Cannot read property 'navigate' of undefined</p>
  </blockquote>
  <p>+++++++++++++++++++++++++
  Update2</p>
  <p>Routing:</p>
  <pre><code>   function ClassA({ navigation }) {
      return (
          &lt;ClassAScreen/&gt;
      );
  
     function Target({ navigation }) {
      return (
          &lt;TargetScreen/&gt;
      );
      
      //navigation stacks
      const SessionStack = createStackNavigator();
      
      function SessionStackScreen({ navigation }) {
          return (
              &lt;SessionStack.Navigator&gt;
                  &lt;SessionStack.Screen
                  name=&quot;ClassA&quot;
                  component={ClassA}
                  options={{ tabBarLabel: 'ClassA!', headerShown: false }}
                  /&gt;
                  &lt;SessionStack.Screen
                  name=&quot;Target&quot;
                  component={Target}
                  options={{ tabBarLabel: 'works!' }}
                  /&gt;
              &lt;/SessionStack.Navigator&gt;
          )
      }
  </code></pre>
  <p>Logging gives me this:</p>
  <pre><code>renderItemCustom = ({ item }) =&gt; (
          &lt;CustomButton element={item.title} onPress={() =&gt;  console.log(this.props)} /&gt;
      );
      
  </code></pre>
  <p><a href="https://i.stack.imgur.com/8MEMH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8MEMH.png" alt="enter image description here" /></a></p>
  <p>+++++++++++++++++
  Update:</p>
  <p>Solution can be found here:
  <a href="https://stackoverflow.com/questions/67924307/navigation-with-parameters-from-custom-element-in-flatlist-in-react-native-empt/67924670#67924670">Navigation with parameters from custom element in Flatlist in React Native: Empty parameters</a></p>