How do you hide the warnings in React Native iOS simulator?
IosReact NativeShow HideIos Problem Overview
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?
Ios Solutions
Solution 1 - Ios
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
Solution 2 - Ios
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.
Solution 3 - Ios
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>);
}
}
Solution 4 - Ios
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;
Solution 5 - Ios
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;
Solution 6 - Ios
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);
Solution 7 - Ios
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:
- In Project in XCode.
Product
>Scheme
>Edit Scheme...
- Change
Build Configuration
fromDebug
toRelease
.
Solution 8 - Ios
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
Solution 9 - Ios
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.
Solution 10 - Ios
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:...']);
Solution 11 - Ios
console.disableYellowBox = true;
this worked for application level Put it anywhere in index.js file
Solution 12 - Ios
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.
Solution 13 - Ios
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
Solution 14 - Ios
console.disableYellowBox = true;
Solution 15 - Ios
console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed'];
Solution 16 - Ios
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.
Solution 17 - Ios
(but not for your own code) Related: Suppress Xcode warnings from React Native library
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.
https://stackoverflow.com/questions/7997636/disable-warnings-in-xcode-from-frameworks
Solution 18 - Ios
I like to put the console.disableYellowBox = true on the file root, like App. But this just when im on the development phase.