Require JSX in React-Native

Question

How do you require JSX in React Native?

var MyScreen = require('./apps/screens/LoadingScreen');

Requiring a .js file this way works, but a .jsx file is not found.

Answer 1

I think you may just have to rename your file from .jsx to .js and the build process will take care of any conversion. Colin's answer would seem to confirm this.

An example of JSX in a .js file is shown in http://moduscreate.com/react-native-has-landed/ .

The React team continues to encourage the use of JSX: http://facebook.github.io/react/docs/jsx-in-depth.html .

Answer 2

Here's how I solved it with a quick hack: open [YOU_PROJECT_FOLDER]/node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/index.js and edit line 55 to look like this

extensions: extensions || ['jsx', 'js', 'json'],

the open [YOU_PROJECT_FOLDER]/node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js and after line 333 add these 2 lines:

  } else if (this._fastfs.fileExists(potentialModulePath + '.jsx')) {
    file = potentialModulePath + '.jsx';

This will make the packager recognize mymodule.jsx files when you do something like require("mymodule")

Note: the actual lines are from the latest 0.17 release, in other releases the lines may differ