react-native-reanimated: [Reanimated] Couldn't determine the version of the native part of Reanimated.

Description

I am trying to upgrade my react-native version and in the process of doing so, I have ran into an issue with react-native-reanimated. Whenever my app builds, I get the following error in my metro console - [Reanimated] Couldn't determine the version of the native part of Reanimated. Did you forget to re-build the app after upgrading react-native-reanimated? If you use Expo Go, you must use the exact version which is bundled into Expo SDK

I have tried:

• expo doctor --fix-dependencies
• Deleting podfile.lock, DerivedData folder, build folder, Pods folder, project_name.xcworkspace folder, node_modules, yarn.lock and reinstalling packages using yarn install
• npx expo install react-native-reanimated
• yarn cache clean
• expo start --clear

Here is my metro.config -

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false
        }
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg", "cjs"]
    }
  };
})();

Here is my babel.config.js -

const config = {
  presets: ['module:metro-react-native-babel-preset','babel-preset-expo'],
  env: {
    production: {
      plugins: ['transform-remove-console'],
    },
    test: {
      plugins: [
        [
          'module:react-native-dotenv',
          {
            moduleName: '@env',
          },
        ],
      ],
    },
  },
  plugins: [
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        safe: true,
        allowUndefined: true,
      },
    ],
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
    '@babel/plugin-proposal-optional-catch-binding',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    [
      'module-resolver',
      {
        root: ['./'],
        extensions: [
          '.ios.js',
          '.android.js',
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
          '.json',
        ],
        alias: {
          '^@app/(.+)': './app/\\1',
          '^@story/(.+)': './.storybook/\\1',
        },
        cwd: 'packagejson',
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

module.exports = (api) => {
  api.cache(true);
  return config;
};

Any pointers in the right direction would be hugely helpful. I spent a whole day trying to resolve this with no luck unfortunately.

Steps to reproduce

1. yarn install
2. Build app from XCode (14.2)
3. Once simulator loads & metro builds the app, I get the error

Snack or a link to a repository

https://snack.expo.io/

Reanimated version

2.14.4

React Native version

0.71.4

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

2020 M1 Macbook Pro

Acknowledgements

Yes