Disable and Ignore Yellow Box Warnings in React Native
Yellow box warnings in react native can be intrusive. We will use console.disableYellowBox to disable the yellow box entirely. We'll also use console.ignoredYellowBox to selectively disabled warnings.
[00:01] ReactNative allows you to disable the YellowBox when there are warnings that occur. For example, if we refresh, we can see that a child key warning has occurred. However, if we'd like to ignore it and disable all YellowBoxes, we can have console.disableYellowBox=true. Now when we refresh, we can see that no warnings appear.
[00:23] This may not be ideal because you might want to see some warnings, but ignore other warnings. There's also the option of ignoredYellowBox, which takes an array of strings to ignore. This will simply match whatever strings that you type in.
[00:42] If we save this and refresh, we can see that we would want to ignore the warning:each. If we uncomment that and type warning:each, save it, and refresh, we can see that our warning goes away.
[01:00] Let's show that this is actually working. We'll set up a function component called PropType test equals a stateless function with a value and we'll just render a view with text, our value, and close each thing.
[01:21] Now we'll assign prop types to the PropType test. We'll say value is a string that is required. We'll then render this here, but rather than passing any string we'll pass in an integer to cause a PropType to fail. Now when we save and refresh we can see that a PropType is now failing. However, we have only set up to ignore the warnings for the each child.
[01:52] Finally, if we wanted to also ignore this one, we could type warning Failed propType, or however, we could type warning failed. Now when we refresh we can see that it doesn't show up.