title: React Native functional components - Navigate between different screens, each on a separate .js file
body: <p>In my <strong>functional-component</strong>-based React Native app, I want to navigate between different screens, each of which resides in a separate <code>.js</code> file. I want to be able to navigate multiple layers deep like this:</p>
  <p>[<code>Screen1.js</code>] &lt;-&gt; [<code>Screen2.js</code>] &lt;-&gt; [<code>Screen3.js</code>] &lt;-&gt; [<code>Screen4.js</code>]</p>
  <p>For some reason, <a href="https://snack.expo.io/?platform=android&amp;name=Hello%20React%20Navigation%20%7C%20React%20Navigation&amp;dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view%40*%2Creact-native-gesture-handler%40*%2Creact-native-pager-view%40*%2Creact-native-paper%40%5E4.7.2%2Creact-native-reanimated%40*%2Creact-native-safe-area-context%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40%5E3.0.0%2C%40react-navigation%2Fbottom-tabs%406.0.4%2C%40react-navigation%2Fdrawer%406.1.3%2C%40react-navigation%2Felements%401.0.4%2C%40react-navigation%2Fmaterial-bottom-tabs%406.0.4%2C%40react-navigation%2Fmaterial-top-tabs%406.0.2%2C%40react-navigation%2Fnative-stack%406.0.5%2C%40react-navigation%2Fnative%406.0.2%2C%40react-navigation%2Fstack%406.0.6&amp;hideQueryParams=true&amp;sourceUrl=https%3A%2F%2Freactnavigation.org%2Fexamples%2F6.x%2Fpop-to-top.js" rel="nofollow noreferrer">the examples</a> in <a href="https://reactnavigation.org/docs/navigating" rel="nofollow noreferrer">the tutorial</a> place all the screens within the same <code>App.js</code> file, each as their own separate function, which I would imagine is unusual developer behavior.</p>
  <p>I would prefer to have the navigation stack in a single <code>NavigationService.js</code> file, which is then imported by each <code>Screen#.js</code> file. How could I implement this? (I've seen several SO answers on this, along with some online tutorials, but seemingly most of them implement <strong>class</strong> components instead of <strong>functional</strong>.)</p>
  <p>Below is my attempt at implementing this environment, but when I try to navigate to a new screen, I get <code>_NavigationService.default.navigate is not a function. (In '_NavigationService.default.navigate('Email')', '_NavigationService.default.navigate' is undefined)</code>.</p>
  <p><strong>NavigationService.js:</strong></p>
  <pre><code>import * as React from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  import EmailScreen from './Email';
  import HomeScreen from './App';
  
  const Stack = createNativeStackNavigator();
    
  function NavigationService( navigation ) {
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator initialRouteName=&quot;Home&quot;&gt;
          &lt;Stack.Screen name=&quot;Home&quot; component={HomeScreen} /&gt;
          &lt;Stack.Screen name=&quot;Camera&quot; component={CameraScreen} /&gt;
          &lt;Stack.Screen name=&quot;Email&quot; component={EmailScreen} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  export default {navigation, NavigationService};
  </code></pre>
  <p><strong>App.js (HomeScreen):</strong></p>
  <pre><code>import * as React from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  import { Button } from 'react-native-elements';
  import NavigationService from './NavigationService';
  
  function HomeScreen() {
    return (
      &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}&gt;
      &lt;Button buttonStyle={styles.cameraButton} titleStyle={styles.buttonText}
      onPress={() =&gt; NavigationService.navigate('Email')}
      title=&quot;Email pics&quot;
      /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    cameraButton: {
      backgroundColor: 'red',
    },
    buttonText: {
      fontSize: 24
    }
  });
  
  export default HomeScreen;
  </code></pre>
  <p><strong>Email.js (EmailScreen):</strong></p>
  <pre><code>import * as React from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  import RNSmtpMailer from 'react-native-smtp-mailer';
  
  function EmailScreen() {
  
      return(
          &lt;View&gt;
              &lt;Text&gt;Test hi hi hi&lt;/Text&gt;
          &lt;/View&gt;
      )
  }
  export default EmailScreen;
  </code></pre>