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
at the top of every file.
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
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!