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