Disable React Native console.log in Release Mode

Developers frequently log messages to the Console to make sure their code is working as expected. Of course, it is helpful to make our lives easier. but it can be dangerous in a production application.

Main reasons to disable console.log
Speed: Console will reduce your application's performance since it takes computational time. Especially in Android, you can feel the difference.

Security: Hackers or some expert user can see your logs if you didn't disable them. it's dangerous especially logging sensitive data. or if you are using Redux Logger it will log all your actions and payload.

Let's get rid of console logs in the Release Mode

As you know, React Native uses Metro to bundle JavaScript for Android and iOS platforms. and we have metro.config.js  file in our project root. You will see this code if you didn't change anything before.

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

These are config to override default Metro configuration. Actually, you can add more configuration to this file. More documentation about configuration Metro  Metro uses uglify-es to minify and compress your code by default.

As you can see in Metro docs, there is  mergeConfig function and getDefaultConfig function this is not the documentation but you can see inside node_modules/metro-config/src/index.js.

const getDefaultConfig = require("./defaults");

const _require = require("./loadConfig"),
  loadConfig = _require.loadConfig,
  resolveConfig = _require.resolveConfig,
  mergeConfig = _require.mergeConfig;

module.exports = {
  loadConfig,
  resolveConfig,
  mergeConfig,
  getDefaultConfig
};

Then first we get defaultConfig from metro-config. then we will add drop_console: true (this config come from uglify-es)  to transform.minifierConfig.compress options. you can also check the default metro config from here

 const {getDefaultConfig, mergeConfig} = require('metro-config');

 const defaultConfig = async () => {
   await getDefaultConfig();
 };
 const customConfig = {
   transformer: {
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
         inlineRequires: false,
       },
     }),
     minifierConfig: {
       mangle: {
         toplevel: false,
       },
       output: {
         ascii_only: true,
         quote_style: 3,
         wrap_iife: true,
       },
       sourceMap: {
         includeSources: false,
       },
       toplevel: false,
       compress: {
         /* you need add following line  */
           
         drop_console: true,
         reduce_funcs: false,
       },
     },
   },
 };
 
 module.exports = mergeConfig(defaultConfig, customConfig);
 

That's all. when you bundle the app in release mode. It gets minified and console.logs will be removed.