How to Enable the new LogBox (RN)

Question

I'm trying to enable the new LogBox in React Native (v0.62.0-rc.2), I just have to add a line to the "index.js" file but it doesn't work.

RC2 introduces the new LogBox experience behind a feature flag. To try it out, add the following to your index.js file:

require('react-native').unstable_enableLogBox()

index.js

require('react-native').unstable_enableLogBox();

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

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

Error output:

TypeError: _$$_REQUIRE(_dependencyMap[1], "react-native").unstable_enableLogBox is not a function.

I'm sure I'm doing something wrong, maybe it's not the right way.

Answer 1

you need to do the following:

1. create a file in the project root title it intro.js
2. add require('react-native').unstable_enableLogBox(); to intro.js
3. add import './intro'; at the top of index.js

This worked with me.

Answer 2

import {name as appName} from './app.json'; require('react-native').unstable_enableLogBox();

please write in simple manner I mentioned above please check screen shot for Log box.

Answer 3

Here's how I did it. For some reason imports get resolved super early, which seems to cause the following error:

Error: LogBox must be enabled before AppContainer is required so that it can properly wrap the console methods.

Please enable LogBox earlier in your app.

Move the contents of your entrypoint (usually index.js) to another file (_index.js for example), then require() it from your entrypoint AFTER enabling the logbox:

if(__DEV__)
  require('react-native').unstable_enableLogBox();

require('./_index');

Answer 4

First of all, identify where is the main file of your entire app. For example, if you are using a file like Reactotron config file you will put this line before all imports:

require('react-native').unstable_enableLogBox();

Therefore, if you are not using something like Reactotron you will put the above line, before your App import on index.js in the root of project, like this:

require('react-native').unstable_enableLogBox();
...
import { AppRegistry } from 'react-native';
import App from './src/App';
import { name } from './app.json';

AppRegistry.registerComponent(name, () => App);

I hope i've helped! =)

Answer 5

According to the React Native docs this is how you would implement it:

import { LogBox } from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

I did this at the very top of App.js and it worked great.