skip to Main Content

I need to configure my babel.config.js to use react-native-vision-camera as:

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

but my current configuration is as:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'nativewind/babel',
    'react-native-reanimated/plugin',
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '^@src/(.+)': './src/\1',
          '^@assets/(.+)': './src/assets/\1',
          '^@components/(.+)': './src/components/\1',
          '^@contexts/(.+)': './src/contexts/\1',
          '^@models/(.+)': './src/models/\1',
          '^@navigation/(.+)': './src/navigation/\1',
          '^@screens/(.+)': './src/screens/\1',
          '^@services/(.+)': './src/services/\1',
          '^@utils/(.+)': './src/utils/\1',
        },
      },
    ],
  ],
};

Where to put my globals?

All the configurations I have tried are not working

Thanks!

2

Answers


  1. Chosen as BEST ANSWER

    the trick is that reanimated warns to use their plugin LAST!!

    module.exports = {
      presets: ['module:metro-react-native-babel-preset'],
      plugins: [
        'nativewind/babel',
        [
          'module-resolver',
          {
            root: ['./src'],
            extensions: [
              '.ios.ts',
              '.android.ts',
              '.ts',
              '.ios.tsx',
              '.android.tsx',
              '.tsx',
              '.jsx',
              '.js',
              '.json',
            ],
            alias: {
              '^@src/(.+)': './src/\1',
              '^@assets/(.+)': './src/assets/\1',
              '^@components/(.+)': './src/components/\1',
              '^@contexts/(.+)': './src/contexts/\1',
              '^@models/(.+)': './src/models/\1',
              '^@navigation/(.+)': './src/navigation/\1',
              '^@screens/(.+)': './src/screens/\1',
              '^@services/(.+)': './src/services/\1',
              '^@utils/(.+)': './src/utils/\1',
            },
          },
        ],
        [
          'react-native-reanimated/plugin',
          {
            globals: ['__scanCodes'],
          },
        ],
      ],
    };
    

  2. module.exports = {
      presets: ['module:metro-react-native-babel-preset'],
      plugins: [
        'nativewind/babel',
        ['react-native-reanimated/plugin', 
          { 
             globals: ['__scanCodes'],
          }
        ],
        [
          'module-resolver',
          {
            root: ['./src'],
            extensions: [
              '.ios.ts',
              '.android.ts',
              '.ts',
              '.ios.tsx',
              '.android.tsx',
              '.tsx',
              '.jsx',
              '.js',
              '.json',
            ],
            alias: {
              '^@src/(.+)': './src/\1',
              '^@assets/(.+)': './src/assets/\1',
              '^@components/(.+)': './src/components/\1',
              '^@contexts/(.+)': './src/contexts/\1',
              '^@models/(.+)': './src/models/\1',
              '^@navigation/(.+)': './src/navigation/\1',
              '^@screens/(.+)': './src/screens/\1',
              '^@services/(.+)': './src/services/\1',
              '^@utils/(.+)': './src/utils/\1',
            },
          },
        ],
      ],
    };
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search