title: Navigating between screens in different files
body: <p>I have been running into an issue with navigating between screens in different files; I am assuming this is due to improperly exporting the functional components from one file to another. I created a snack for it: <a href="https://snack.expo.dev/@figbar/exportingbetweenscreens" rel="nofollow noreferrer">https://snack.expo.dev/@figbar/exportingbetweenscreens</a>, and pasted the code in that below. Essentially, if 'DetailsScreen' is in app.js, the project becomes the sample navigation project, and works properly, however, when it is in this new file, the details screen is blank when navigated to.</p>
  <p>App.js:</p>
  <pre><code>import * as React from 'react';
  import { Button, View, Text } from 'react-native';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import {DetailsScreen} from './other';
  
  function HomeScreen({ navigation }) {
    return (
      &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
        &lt;Text&gt;Home Screen&lt;/Text&gt;
        &lt;Button
          title=&quot;Go to Details&quot;
          onPress={() =&gt; navigation.navigate('Details')}
        /&gt;
      &lt;/View&gt;
    );
  }
  
  const Stack = createStackNavigator();
  
  function App() {
    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;Details&quot; component={DetailsScreen} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>other.js:</p>
  <pre><code>import * as React from 'react';
  import { Button, View, Text } from 'react-native';
  
  function DetailsScreen() {
    return (
      &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
        &lt;Text&gt;Details Screen&lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  export default DetailsScreen;
  </code></pre>