How to use new JSX transform of react 17 with react-native 0.64.0 (rc4)?

Question

The question is basically in the title, but I've created the demo project with react-native 0.64.0-rc.4. This version of RN uses react-17, so supposedly one should also be able to use the new JSX transform. The question is whether it's actually possible, and how. When I comment the line import React from 'react'; in App.js, the app creates a render error because of unknown React variable.

Answer 1

You can refer this comment

I had suffer same issue and resolve it by changing babel.config.js only.

This is my babel.config.js.

The key is useTransformReactJSXExpermiental: true and runtime: 'automatic'

module.exports = {
  presets: [
    ['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }],
    '@babel/preset-typescript',
  ],
  sourceMaps: 'inline',
  plugins: [
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
    [
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
      },
    ],
    '@babel/proposal-object-rest-spread',
    ['babel-plugin-styled-components'],
    'react-native-reanimated/plugin',
  ],
};

Answer 2

In metro.config.js, set experimentalImportSupport to true:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: true,
        inlineRequires: true,
      },
    }),
  },
};