title: How to allow react-native to enable support for JSX (extension) files
body: <p>React Native app fails to resolve components.</p>
  
  <p>I am trying to import &amp; render <code>Test.jsx</code> inside of <code>App.js</code>.</p>
  
  <p>I get the following error-</p>
  
  <pre><code>error: bundling failed: Error: Unable to resolve module `./screens/Test` from App.js`:
  The module `./screens/Test` could not be found from App.js. Indeed, none of these files exist
  </code></pre>
  
  <p>Project Manager(or rather files) look like this-</p>
  
  <p><a href="https://i.stack.imgur.com/OHYY8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OHYY8.png" alt="Files"></a></p>
  
  <p>Code of Test.js-</p>
  
  <pre><code>import React, { Component } from 'react';
  import {View, Text, StyleSheet} from 'react-native'
  
  export default class Test extends Component {
      render() {
        return (
          &lt;View style={styles.container}&gt;
            &lt;Text&gt;Hello World?&lt;/Text&gt;
          &lt;/View&gt;
        );
      }
    }
  
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    }
  });
  </code></pre>
  
  <p>Code of App.js-</p>
  
  <pre><code>/**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  import React, { Component } from 'react';
  import {
    Platform,
    StyleSheet,
    Text,
    View
  } from 'react-native';
  
  import Test from "./screens/Test";
  
  const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
      'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
      'Shake or press menu button for dev menu',
  });
  
  type Props = {};
  export default class App extends Component&lt;Props&gt; {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Test /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
  });
  </code></pre>
  
  <p>I've literally tried every solution mentioned - <a href="https://github.com/facebook/react-native/issues/4968" rel="noreferrer">react-native#4968</a> and none of them seem to work.
  I've also referred to <a href="https://stackoverflow.com/questions/50246677/i-am-getting-the-module-index-css-could-not-be-found-from-react-native">this</a>, but, the solution is for css and nowhere close to what would fix this issue.</p>
  
  <p>I've looked at lot more issues and SO's with no clue what else I have to do. I've also created a new project(screenshot and code is from the new project).</p>
  
  <p>What am I missing?</p>
  
  <p><strong>UPDATE:</strong>
  I realised that the issue was because I have <code>.jsx</code> extension. Imports are working fine for <code>.js</code> file. Any pointers on how to enable the project to accept <code>.jsx</code> for imports?</p>