title: React Native (Android): Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'Home'
body: <p>Hoping someone can help as i'm struggling to see what the issue is.</p>
  <p>When using react-native-navigation to create a stack navigator, no matter what approach I use to export and import the component to pass into the &lt;Stack.Screen/&gt;, it seems to throw the below error.</p>
  <p><a href="https://i.stack.imgur.com/H0JXz.png" rel="nofollow noreferrer">React Native Issue</a></p>
  <p><strong>Stack Trace</strong></p>
  <p><code>Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'Home'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.</code></p>
  <p>After seeing this stack trace, i done a console.log() and passed in the component just to see if <code>undefined</code> was being returned. This wasn't the case. I can see the HomeComp component for example be</p>
  <p><strong>package.json</strong></p>
  <pre><code>  &quot;name&quot;: &quot;myApp&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;android&quot;: &quot;react-native run-android&quot;,
      &quot;ios&quot;: &quot;react-native run-ios&quot;,
      &quot;start&quot;: &quot;react-native start&quot;,
      &quot;test&quot;: &quot;jest&quot;,
      &quot;lint&quot;: &quot;eslint .&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@react-native-community/masked-view&quot;: &quot;^0.1.10&quot;,
      &quot;@react-navigation/native&quot;: &quot;^5.8.0&quot;,
      &quot;@react-navigation/stack&quot;: &quot;^5.10.0&quot;,
      &quot;axios&quot;: &quot;^0.21.0&quot;,
      &quot;body-parser&quot;: &quot;^1.19.0&quot;,
      &quot;connect-flash&quot;: &quot;^0.1.1&quot;,
      &quot;dotenv&quot;: &quot;^8.2.0&quot;,
      &quot;express&quot;: &quot;^4.17.1&quot;,
      &quot;express-validator&quot;: &quot;^6.6.1&quot;,
      &quot;mongoose&quot;: &quot;^5.10.10&quot;,
      &quot;react&quot;: &quot;16.13.1&quot;,
      &quot;react-native&quot;: &quot;0.63.3&quot;,
      &quot;react-native-gesture-handler&quot;: &quot;^1.8.0&quot;,
      &quot;react-native-reanimated&quot;: &quot;^1.13.1&quot;,
      &quot;react-native-safe-area-context&quot;: &quot;^3.1.8&quot;,
      &quot;react-native-screens&quot;: &quot;^2.12.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;7.12.3&quot;,
      &quot;@babel/runtime&quot;: &quot;7.12.1&quot;,
      &quot;@react-native-community/eslint-config&quot;: &quot;1.1.0&quot;,
      &quot;babel-jest&quot;: &quot;25.5.1&quot;,
      &quot;eslint&quot;: &quot;6.8.0&quot;,
      &quot;jest&quot;: &quot;25.5.4&quot;,
      &quot;metro-react-native-babel-preset&quot;: &quot;0.59.0&quot;,
      &quot;react-test-renderer&quot;: &quot;16.13.1&quot;
    },
    &quot;jest&quot;: {
      &quot;preset&quot;: &quot;react-native&quot;
    }
  }
  </code></pre>
  <p><strong>HomeComp.js</strong></p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { View, StyleSheet, Text, FlatList } from 'react-native';
  
  function HomeComp() {
  
  
  
      return (
          &lt;View&gt;
              &lt;Text&gt;Welcome!&lt;/Text&gt;
          &lt;/View&gt;
      )
  
  }
  
  const styles = StyleSheet.create({
      container: {
          //paddingTop: 30,
  
      },
      text: {
          fontSize: 20,
          margin: 10
      },
  })
  
  export default HomeComp;
  </code></pre>
  <p><strong>app.js</strong></p>
  <pre><code>import React, { Component  } from 'react';
  import { Platform, StyleSheet, Text, View } from 'react-native';
  import HomeComp from './src/components/HomeComp';
  // import  StatefulComponent  from './src/components/api_comp';
  import { createStackNavigator } from '@react-navigation/stack';
  import { NavigationContainer } from '@react-navigation/native';
  // To see all the requests in the chrome Dev tools in the network tab.
  XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
      GLOBAL.originalXMLHttpRequest :
      GLOBAL.XMLHttpRequest;
  
  // fetch logger
  global._fetch = fetch;
  global.fetch = function (uri, options, ...args) {
      return global._fetch(uri, options, ...args).then((response) =&gt; {
          console.log('Fetch', { request: { uri, options, ...args }, response });
          return response;
      });
  };
  
  function test(){
      return(
      &lt;View&gt;
          &lt;Text&gt;home page&lt;/Text&gt;
      &lt;/View&gt;
      );
  }
  
  console.log({HomeComp})
  
  
  export default class App extends Component {
  
  
      render() {
      Stack = createStackNavigator();
  
          return (
              &lt;NavigationContainer&gt;
                  &lt;Stack.Navigator&gt;
                  
                      &lt;Stack.Screen
                          name=&quot;Home&quot;
                          Component={HomeComp}
                      /&gt;
  
                      &lt;Stack.Screen 
                          name=&quot;test&quot;
                          Component={test}
                      /&gt;
                  &lt;/Stack.Navigator&gt;
              &lt;/NavigationContainer&gt;
  
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: '#1c8282'
      },
      instructions: {
          textAlign: 'center',
          color: '#333333',
          marginBottom: 5
      }
  }); ```
  
  
  
  
  
  </code></pre>