console.ignoredYellowBox how do I know what prefix to use?

Question

I have one general questions and two more specific ones.

1. How can I tell from a yellowbox warning message how to ignore it in React-Native?
2. How do I ignore this specific warning?

3. And how do I ignore this specific warning?

All that React-Native documentation says about ignoring specific warnings is:

"YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];."

So React-Native offers this piece of code, but I don't know how to specify the name of the warning:

console.ignoredYellowBox = ['Warning: ReactNative.createElement'];

Answer 1

While it isn't covered in detail in the docs, looking at the YellowBox component code, we can see that it uses a simple string match to filter the warnings:

return (
  Array.isArray(console.ignoredYellowBox) &&
  console.ignoredYellowBox.some(
    ignorePrefix => warning.startsWith(String(ignorePrefix))
  )
);

Given this, you can disable the overlays for the errors outlined in the questions simply by doing the following:

console.ignoredYellowBox = [
  'NetInfo\'s "change" event', // Safe to ignore because reasons
  'Using <Image> with children' // TODO: Will be fixed in release foo
];

You can make the matches more specific or more ambiguous as needed, since it's a simple string match.
Note that the errors will still be logged to the console, the above configuration simply disables the large yellow overlay for the given errors.

In future releases of React Native console.ignoredYellowBox will be deprecated and superseded by YellowBox.ignoreWarnings which will work in an identical fashion.

Answer 2

"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."

If you want more control over these messages, check out this link for more in-depth infos: Disable the Yellow Box in React Native