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 attend the issue. Proper fixing of the warnings can make your app more optimised.

But, there are some scenarios where the yellow box warnings are 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 not 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:

console.disableYellowBox = true;

You can also disable specific 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 componentDidMount life cycle of the react native example given below. Using the YellowBox.ignoreWarnings method, the First Warning has been disabled. Hence, you can see only the second warning in the output.

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

export default class App extends Component {
  constructor(props) {
    this.state = {};

  componentDidMount() {
    YellowBox.ignoreWarnings(['First Warning!']);
    console.warn('First Warning!');
    console.warn('Second Warning!');

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
remove yellow warning react native

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

Leave a Reply

%d bloggers like this: