212

I just upgraded my React Native and now the iOS simulator has a bunch of warnings. Besides fixing them, how do I hide these warnings so that I can see what's underneath?

21 Answers 21

431

According to React Native Documentation, you can hide warning messages by setting disableYellowBox to true like this:

console.disableYellowBox = true;

Update: React Native 0.63+

console.disableYellowBox is removed and now you can use:

import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Warning: ...']); // Ignore log notification by message
LogBox.ignoreAllLogs();//Ignore all log notifications

to ignore all log notifications

6
  • 3
    this worked for me, but not the other answers that said console.ignoredYellowBox = [...];
    – sdfsdf
    Commented Jun 16, 2016 at 5:56
  • 2
    Sorry, but where do you add console.disableYellowBox = true ? Commented Jul 20, 2017 at 15:42
  • 2
    @Mike, any place in your script, when you want to disable yellow box.
    – Moussawi7
    Commented Jul 24, 2017 at 8:16
  • 2
    A good place to put it is on the constructor of RootContainer component! Commented Apr 4, 2018 at 17:38
  • 4
    Placing it in the App.js (or Routes.js depending on your structure) works well as well.
    – thePsguy
    Commented Nov 1, 2018 at 17:40
150

A better way to selectively hide certain warnings (that indefinitely show up after an upgrade to the latest and greatest RN version) is to set console.ignoredYellowBox in a common JS file in your project. For example, after upgrading my project today to RN 0.25.1 I was seeing a lot of...

Warning: ReactNative.createElement is deprecated...

I still want to be able to see helpful warnings and error messages from React-Native, but I want to squash this particular warning because it's coming from an external npm library that hasn't yet incorporated the breaking changes in RN 0.25. So in my App.js I add this line...

// RN >= 0.63
import { LogBox } from 'react-native';

LogBox.ignoreLogs(['Warning: ...']);

// RN >= 0.52
import {YellowBox} from 'react-native';

YellowBox.ignoreWarnings(['Warning: ReactNative.createElement']);

// RN < 0.52
console.ignoredYellowBox = ['Warning: ReactNative.createElement'];

This way I still get other errors and warning helpful for my dev environment, but I no longer see that particular one.

5
  • Perfect fix for me, though I had the same "ReactNative.createElement is deprecated" warning. Commented May 7, 2016 at 21:30
  • 2
    how much of the error message should you write to ignore it?
    – Soorena
    Commented Aug 12, 2018 at 10:48
  • This answer needs update . YelloBox is not part of react-native anymore. Commented Jul 13, 2020 at 11:53
  • 1
    it supports both regexp and substrings, but typescript types only have strings :(
    – JLarky
    Commented Oct 9, 2020 at 6:44
  • Does anyone knows if React Native Web forwards this for web console. Can't get it to work on web yet.
    – KeitelDOG
    Commented Mar 1, 2023 at 15:13
29

To disable the yellow box place

console.disableYellowBox = true; 

anywhere in your application. Typically in the root file so it will apply to both iOS and Android.

For example

export default class App extends React.Component {
     render() {
          console.disableYellowBox = true;
          return (<View></View>);
     }
}
21

add this line in your app main screen.

console.disableYellowBox = true;

for example:- in index.js file

import { AppRegistry } from 'react-native';
import './src/utils';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);
console.disableYellowBox = true;
19

For me below lines worked currently I am using react native 0.64

  import { LogBox } from 'react-native';

  LogBox.ignoreLogs(['Warning: ...']); //Hide warnings

  LogBox.ignoreAllLogs();//Hide all warning notifications on front-end

When adding your warning to specify exactly which warning to suppress, you need to exactly add the warning message, like so (random example)

LogBox.ignoreLogs([
  'Warning: Failed prop type: Invalid props.style key `tintColor` supplied to `Text`.',
]);

Using single quotes instead of backticks around tintColor or Text, for example, will not work.

15

In your app.js file under any component's lifecycle method.like in componentDidmount() you have to add both of these,excluding any will not work.

console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed'];
console.disableYellowBox = true;
1
  • That is not true, something is going on in your project. One line says "ignore this list of warnings" (which is the most precise way to do it), one line says "ignore all warnings" (which is a really blunt way to do it). I only have the first line for instance, and it suppresses my warnings perfectly.
    – Mike Hardy
    Commented Apr 19, 2020 at 14:56
13

Add the following code in your index.js file

console.disableYellowBox = true;

    import {AppRegistry} from 'react-native';
    import App from './App';
    import {name as appName} from './app.json';

    console.disableYellowBox = true;



AppRegistry.registerComponent(appName, () => App);
12

If You're Trying to Quickly Demo the App.

If you want to hide them in a particular build because you're doing a demo or something, you can edit your Xcode scheme to make it a release build and these yellow warnings will not show up. Additionally, your app will run much faster.

You can edit the Scheme for your simulator and real device by doing the following:

  1. In Project in XCode.
  2. Product > Scheme > Edit Scheme...
  3. Change Build Configuration from Debug to Release.
3
  • 1
    Should be the accepted answer. In Release: no warning, and faster app !
    – cappie013
    Commented Jul 4, 2017 at 18:12
  • 2
    You don't get any debug features in Release Commented Jan 8, 2018 at 10:35
  • 1
    @PhilAndrews I agree! I don't know I posted this way back when but there are enough people that find it useful that I'll leave it. I must have been trying to demo the app to somebody and wanted to get rid of yellow warnings, in which case, this is the right way to go. Commented May 8, 2018 at 12:59
11

For those coming this way trying to disable red warnings from the console, that give absolutely useless information, as of feb/17, you can add this line of code somewhere

console.error = (error) => error.apply;

Disables all console.error

1
  • 1
    Thanks! I didn't even realize that my console error was the reason that red screen was popping up. I thought something was wrong with try/catch not working :o.
    – Nick
    Commented Jun 8, 2018 at 9:27
11

RN >= 0.62

import {LogBox} from 'react-native'

under the import, add

LogBox.ignoreLogs(['...']);

instead of '...', you can write the warnings you want to hide. For instance, I had the warning VirtualizedLists should never be .... then I can write as

LogBox.ignoreLogs(['VirtualizedLists']);

if you want to add another error, you can write as

LogBox.ignoreLogs(['VirtualizedLists','Warning:...']);
6

console.disableYellowBox = true;

this worked for application level Put it anywhere in index.js file

5

I found that even when I disabled specific warnings (yellow-box messages) using the above mentioned methods, the warnings were disabled on my mobile device, but they were still being logged to my console, which was very annoying and distracting.

To prevent warnings from being logged to your console, you can simply override the warn method on the console object.

// This will prevent all warnings from being logged
console.warn = () => {};

It is even possible to disable only specific warnings by testing the provided message:

// Hold a reference to the original function so that it can be called later
const originalWarn = console.warn;

console.warn = (message, ...optionalParams) => {
  // Insure that we don't try to perform any string-only operations on
  // a non-string type:
  if (typeof message === 'string') {
    // Check if the message contains the blacklisted substring
    if (/Your blacklisted substring goes here/g.test(message))
    {
      // Don't log the value
      return;
    }
  }

  // Otherwise delegate to the original 'console.warn' function
  originalWarn(message, ...optionalParams);
};

If you can't (or don't want to) use a Regular Expression to test the string, the indexOf method will work just as well:

// An index of -1 will be returned if the blacklisted substring was NOT found
if (message.indexOf('Your blacklisted substring goes here') > -1) {
  // Don't log the message
  return;
}

Be aware that this technique will filter all messages that go through the warn function regardless of where they originated from. Because of this, be careful that you do not specify an overly generous blacklist that will suppress other meaningful errors that may originate from somewhere other than React Native.

Also, I believe that React Native uses the console.error method to log errors (red-box messages), so I'm assuming that this technique could be used to filter out specific errors as well.

5

Add in app.js

import LogBox from React Native

import {LogBox} from 'react-native';

and then..

LogBox.ignoreAllLogs()

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Sep 26, 2022 at 7:53
4

To disable the yellow box place console.disableYellowBox = true; anywhere in your application. Typically in the root file so it will apply to both iOS and Android.

For get more details please check official document

4

console.disableYellowBox = true;

3

It works fine after it has been added

//app.js

import { LogBox } from 'react-native'; 

 useEffect(() => {
    LogBox.ignoreAllLogs(true)
 }, [])

https://reactnative.dev/blog/2020/07/06/version-0.63

2

Create an warnings file separately, then we can add multiple alerts there

Like this IgnoreWarnings.js

import { LogBox } from "react-native";

if (__DEV__) {
  const ignoreWarns = [
    "EventEmitter.removeListener",
    "[fuego-swr-keys-from-collection-path]",
    "Setting a timer for a long period of time",
    "ViewPropTypes will be removed from React Native",
    "AsyncStorage has been extracted from react-native",
    "exported from 'deprecated-react-native-prop-types'.",
    "Non-serializable values were found in the navigation state.",
    "VirtualizedLists should never be nested inside plain ScrollViews",
    "Remote debugger"
  ];

  const warn = console.warn;
  console.warn = (...arg) => {
    for (const warning of ignoreWarns) {
      if (arg[0].startsWith(warning)) {
        return;
      }
    }
    warn(...arg);
  };
  LogBox.ignoreLogs(ignoreWarns);
}

import the IgnoreWarnings file in the navigation or app.js file like this

import "../helpers/IgnoreWarnings";
0
0

In your AppDelegate.m file you can change this line :

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

and replace dev=true by dev=false at the end.

0

Related: Suppress Xcode warnings from React Native library

(but not for your own code)

why: when initialising a new RN-app, the Xcode project contains closer to 100 warnings that is distracting noise (but probably harmless otherwise)

solution: set inhibit all warnings to yes under Build Settings for the relevant targets.

enter image description here

Disable warnings in Xcode from frameworks

https://github.com/facebook/react-native/issues/11736

2
  • also; for logic errors; see "-Xanalyzer -analyzer-disable-all-checks" Commented Sep 6, 2017 at 12:51
  • Original question was about in-app warning (ie. yellow box), I found this question when trying to clean up the Xcode project warnings. Why downvote? see meta.stackoverflow.com/questions/299352/… Commented May 29, 2018 at 22:41
0

I like to put the console.disableYellowBox = true on the file root, like App. But this just when im on the development phase.

0

console.error = (error) => error.apply; // in the index.js

Some times rn 0.66 does not works Logbox. especially for VirtualizedLists should never be nested inside plain ScrollViews.

And also ignore red warnings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.