React Native is a really cool developing technology, but it forces some strange defaults on its users.
One such choice is the refusal to support the
.jsx extension out of the box.
While Babel (which is also required by React Native) has no problem handling JSX syntax in
.js files, many style guides (including AirBnB’s linter rules) require JSX syntax to be isolated to
Although the core React Native team doesn’t show any signs of reversing their stance, it is possible in recent versions to extend the list of permissible file extensions. I haven’t been able to find any mention of it in the official documentation, but React Native allows customizing several parts of the packager pipeline, including the list of acceptable file extensions for source files.
The React Native scripts provide a
--config option, so you can supply any file as the configuration module.
However, it has two major flaws.
The first is that the scripts take this value as provided on the commandline and pass it directly to a call to
require deep in the guts of React Native.
This means that your path must either be relative to wherever the
require call resides (which is naturally subject to change), or it has to be an absolute path.
The other limitation shows up when you try to run your app in the iOS simulator (and presumably the Android simulator, but I haven’t tested this).
When you run
yarn ios (or
This means that if you want reliable configuration overrides, you have to rely on magic.
React Native’s configuration loader will search all of its ancestor directories for a file called
rn-cli.config.js, and it will load the one closest to the root directory.
This means that if you create a file with that name at your project root, it will be loaded and used automatically, no matter which React Native script you’re using.
It also means that if you want to be really evil to one of your coworkers who left a machine unlocked, you can run
touch /rn-cli.config.js to completely break any projects using a custom configuration.
So how do we use this knowledge to enable
We just add this config:
Now you can use
.jsx files with abandon!