title: Navigate from a class to another screen using React Navigation (React Native)
body: <p>I am attempting to use react navigation in class. I normally use it in functions like this:</p>
  <pre><code>//imports...
  export default function Page1({navigation}) {
  //...
  onPress={()=&gt;{navigation.navigate('Page2')}}
  //...
  }
  </code></pre>
  <p><code>onPress</code> is inside <code>TouchableOpacity</code>. Now I want to use it in class like this:</p>
  <pre><code>//imports...
  export default class Page3 extends React.Component {
  //...
  onPress={()=&gt;{navigation.navigate('Page4')}}
  //...
  }
  </code></pre>
  <p>I dont know how to pass <code>{navigation}</code> to class Page3. Is there a way to do this?
  This is my App.js</p>
  <pre><code>//...
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  
  const Stack = createNativeStackNavigator();
  
  import Page1 from './src/Page1';
  import Page2 from './src/Page2';
  import Page3 from './src/Page3';
  import Page4 from './src/Page4';
  
  export default function App() {
    return (
        &lt;NavigationContainer&gt;
          &lt;Stack.Navigator&gt;
            &lt;Stack.Screen component={Page1} name=&quot;Page1&quot; options={{headerShown:false}}&gt;&lt;/Stack.Screen&gt;
            &lt;Stack.Screen component={Page2} name=&quot;Page2&quot; options={{headerShown:false}}&gt;&lt;/Stack.Screen&gt;
            &lt;Stack.Screen component={Page3} name=&quot;Page3&quot; options={{headerShown:false}}&gt;&lt;/Stack.Screen&gt;
            &lt;Stack.Screen component={Page4} name=&quot;Page4&quot; options={{headerShown:false}}&gt;&lt;/Stack.Screen&gt;
          &lt;/Stack.Navigator&gt;
        &lt;/NavigationContainer&gt;
    );
  }
  </code></pre>