title: Is it possible to import components as separate files in React native?
body: <p>I am trying to make my react native app modular and hence creating JSX files as components. This is my App.js</p>
  
  <pre><code>  import React from 'react';
    import Header from './components/Header';
    import { StyleSheet, Text, View } from 'react-native';
  
    export default class App extends React.Component {
      render() {
       return (
         &lt;View style={styles.container}&gt;
          &lt;Header/&gt;
        &lt;/View&gt;
       );
     }
    }
  
   const styles = StyleSheet.create({
     container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
        },
     });
  </code></pre>
  
  <p>In the Root folder where App.js is, I have a folder called component and a JSX file called Header.jsx.
  The Header file looks like this</p>
  
  <pre><code>  import React from 'react';
    import { Text } from 'react-native';
  
    class Header extends React.Component {
     render() {
      return &lt;Text&gt;This is a header component&lt;/Text&gt;;
       }
      }
  
   export default Header;
  </code></pre>
  
  <p>But I get this error <code>Failed building JavaScript bundle.
  Unable to resolve ./components/Header" from ".//App.js</code>: could not resolve <code>/Users/mycomputer/Desktop/myapps/moviedbapp/components/Header' as a file nor as a folder","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]},"type":"bundling_error"}"</code></p>
  
  <p>I am pretty sure the path to the file and folder is correct when im importing it. I dont know what I am doing wrong please help.</p>