Enable the new JSX Transform in React Native 0.64

React Native 0.64 was released in March 2021, bringing some exciting new features that are discussed in our other post “What’s new in React Native 0.64”. One notable change is the jump to React 17, which was released in October 2020. While React 17 didn’t include any new developer-facing features, it added support for a new version of the JSX transform that doesn’t need an

import React

at the top of every file.

A JSX transform is needed because browsers don’t understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript. Many preconfigured toolkits like Create React App or Next.js also include a JSX transform under the hood.

The React team has worked with Babel to offer a new, rewritten version of the JSX transform with numerous improvements:

• With the new transform, you can use JSX without importing React.
• Depending on your setup, its compiled output may slightly improve the bundle size.
• It will enable future improvements that reduce the number of concepts you need to learn React.

Eager React Native developers may try to remove their React imports after upgrading to version 0.64, but they’ll encounter an error. When the component renders, the app crashes with the error

ReferenceError: Property ‘React’ doesn’t exist

which leaves developers puzzled since React 17 should support this. Here’s how to fix it!

To enable the new JSX transformation, you must edit your

babel.config.js

file. The file should be located at the root folder of your project. The key is

useTransformReactJSXExperimental: true and runtime: ‘automatic’

. You will probably have to combine this with your current Babel config for it to work, not just pasting it in.

Now save the file, rebuild your app, and remove all those React imports in your components!