How to add `react-native-reanimated/plugin` to `babel.config.js`?

Question

I'm trying to upgrade react-native-reanimated from v1.13.3 to v2.0.1. In the installation instructions they say to add react-native-reanimated/plugin to your babel.config.js as follows:

  module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Currently my babel.config.js looks like this:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: [
        'react-native-paper/babel'
      ],
    },
  }
};

If I add it like this:

plugins: [
            'react-native-paper/babel'
            'react-native-reanimated/plugin'
          ],

I get this error: Transform's input file does not exist: <project>/node_modules/react-native-reanimated/android/react-native-reanimated-65.aar. (See https://issuetracker.google.com/issues/158753935)

How should I add it instead?

Answer 1

You can try:

module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
   env: {
      production: {
         plugins: [
           'react-native-paper/babel'
         ],
      },
   },
   plugins: [
        'react-native-reanimated/plugin',
   ],
};