babel.config.js

[gkasireddy202]

I installed the react-native-paper in my project with version 5.13.1.
Here are the details of babel.config.js used in my project.
module.exports = {
presets: ['babel-preset-expo'],
plugins: [
'react-native-reanimated/plugin',
],
};

Can you please help me how to add plugins: ['react-native-paper/babel'] in above one?

[RainPlays09]

If you're using React Native, add this in the metro.config.js file:

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

If you're using Expo, just add it in the metro.config.js file:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
/// --- Add this line
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
      },
    },
// ---
  };
};

For more info, read the Getting Started Guide using react-native-paper.

[gkasireddy202]

@RainPlays09 - Thanks for your reply.
My project has 0.78.0. I installed the expo:52.0.38 in my project.
Can I use the below one in babel.config.js
module.exports = {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
env: {
production: {
plugins: ['react-native-paper/babel'],
},
},
};

or

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

Which one I need to use for both Debug(Test) and Release(Production)?

[RainPlays09]

This one (Both debug and release):

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

[gkasireddy202]

@RainPlays09 - Thanks