How to allow react-native to enable support for JSX (extension) files

Question

React Native app fails to resolve components.

I am trying to import & render Test.jsx inside of App.js.

I get the following error-<

Answer 1

update: for RN >0.59 as @RedGaint pointed in https://stackoverflow.com/a/55134051/8034782 you need to configure metro.config.js in the root level.

  module.exports = {
  resolver: {
    /* resolver options */
   sourceExts: ['jsx','js'] //add here 
  },
  transformer: {
    /* transformer options */
  },
  serializer: {
    /* serializer options */
  },
  server: {
    /* server options */
  }

  /* general options */
};

For RN < 0.57: Inside of the root of your project add a file named rn-cli.config.js and place the following code into it.

// ./rn-cli.config.js
module.exports = {
  /// @description Allows you to enable support for JSX files
  /// The `index.js` file in the root of your project has to be `.js`. 
  getSourceExts: () => [ 'jsx', 'js' ],
}

For RN > 0.57:

  module.exports = {
  resolver: {
    sourceExts: ['jsx', 'js'],
    },
  };

for more reference look into this there is already an issue opened:

https://github.com/facebook/react-native/pull/5233#issuecomment-382083236