How to Disable Yellow Box Warnings in React Native

Yellow box warnings are useful while developing react native mobile apps. Even though warnings are not critical as red box errors, the yellow boxes catch the attention of the developer to address the issue. Proper fixing of the warnings can make your app more optimized.

But, there are some scenarios where the yellow box warnings are a pure annoyance to the developer. For example, if you have a warning due to the usage of any third-party libraries/dependencies such as react navigation then you cannot fix the issue directly. In such situations, you may need to disable yellow box warnings.

The method console.warn() is used to create warnings. You can disable yellow box warnings completely using the snippet below:

import { LogBox } from 'react-native';
LogBox.ignoreAllLogs()

You can also disable specifically selected warnings instead of disabling all warnings by setting an array of prefixes that should be disabled.

For your knowledge, Red box errors and yellow box warnings are disabled automatically in your production builds.

There are two warnings in the useEffect of the react native example given below. Using the LogBox.ignoreLogs() method, the First Warning has been disabled. Hence, you can see only the second warning in the output.

import React from 'react';
import {View, Text, LogBox, StyleSheet} from 'react-native';

const App = () => {
  React.useEffect(() => {
    LogBox.ignoreLogs(['First Warning!']);
    console.warn('First Warning!');
    console.warn('Second Warning!');
  }, []);

  return (
    <View style={styles.container}>
      <Text> App </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
});

export default App;

I hope this blog post will help you to disappear those annoying warnings from your react native project. Keep visiting my blog!