React Native babel config for JSC v236355.1.1 and Metro v0.53

babel.config.js

const lazyImports = require('metro-react-native-babel-preset/src/configs/lazy-imports');

module.exports = (api) => {
  api.cache(true);
  return {
    comments: false,
    compact: true,
    plugins: [
      '@babel/plugin-transform-flow-strip-types',
      '@babel/plugin-proposal-optional-catch-binding',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-block-scoping',
      ['@babel/plugin-proposal-class-properties', {
        loose: true,
      }],
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-syntax-export-default-from',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-computed-properties',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-destructuring',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-function-name',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-literals',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-parameters',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-shorthand-properties',
      '@babel/plugin-transform-react-jsx',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-regenerator',
      '@babel/plugin-transform-sticky-regex',
      '@babel/plugin-transform-unicode-regex',
      '@babel/plugin-proposal-export-default-from',
      [
        '@babel/plugin-transform-modules-commonjs',
        {
          strict: false,
          strictMode: false, // prevent "use strict" injections
          lazy: importSpecifier => lazyImports.has(importSpecifier),
          allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
        },
      ],
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-classes',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-arrow-functions'
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-spread',
      '@babel/plugin-proposal-object-rest-spread',
      // SUPPORTED BY DEFAULT: [
      // SUPPORTED BY DEFAULT:   '@babel/plugin-transform-template-literals',
      // SUPPORTED BY DEFAULT:   {loose: true}, // dont 'a'.concat('b'), just use 'a'+'b'
      // SUPPORTED BY DEFAULT: ],
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-exponentiation-operator',
      // SUPPORTED BY DEFAULT: '@babel/plugin-transform-object-assign',
      // SUPPORTED BY DEFAULT: ['@babel/plugin-transform-for-of', {loose: true}],
      'metro-react-native-babel-preset/src/transforms/transform-symbol-member',
      '@babel/plugin-transform-react-display-name',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      ['@babel/plugin-transform-runtime', {
        helpers: true,
        regenerator: true,
      }],
    ],
  };
};

have you had any issues using this babel.config.js for the new RN 0.59?

I've been busting my head trying to get the ** operator and BigInts to work on react-native-macos for a couple days constantly getting TypeError: Cannot convert a BigInt value to a number

This gist saved my life. I really really really appreciate you

I had to comment out the transform-symbol-member line as well to make it work

Also for others trying this remember that the bundler runs from a cache so restart using npm or yarn:

npm start -- --reset-cache

Also typescript was bugging out with these changes. Things like the as operator named tuples, etc. weren't working. Making the following mod to babel.config.js fixed things:

presets: [
    '@babel/preset-typescript'
]