Setting a timer for a long period of time, i.e. multiple minutes

Solution 1:

To fix this issue...

Navigate to your node_modules/react-native/Libraries/Core/Timers/JSTimers.js file.
Look for the variable MAX_TIMER_DURATION_MS
Change its value to 10000 * 1000
Save the changes (with auto format turned off) and re-build your app.

Found this answer on https://github.com/firebase/firebase-js-sdk/issues/97#issuecomment-485410026

Solution 2:

Just add these two lines

import { LogBox } from 'react-native';

LogBox.ignoreLogs(['Setting a timer']);

Solution 3:

Old

This fixes the yellow box and the console log. It even fixes it for Expo.

Simply place the following script at the beginning of your codebase.

import { YellowBox } from 'react-native';
import _ from 'lodash';

YellowBox.ignoreWarnings(['Setting a timer']);
const _console = _.clone(console);
console.warn = message => {
if (message.indexOf('Setting a timer') <= -1) {
   _console.warn(message);
   }
};

New

YellowBox is deprecated and is replaced by LogBox

import { LogBox } from 'react-native';
import _ from 'lodash';

LogBox.ignoreLogs(['Warning:...']); // ignore specific logs
LogBox.ignoreAllLogs(); // ignore all logs
const _console = _.clone(console);
console.warn = message => {
if (message.indexOf('Setting a timer') <= -1) {
   _console.warn(message);
   }
};

Solution 4:

Josh Crowther Software Engineer at Google Said:

Using multi-step short duration setTimeouts doesn't actually fix the problem though. The Timer module still stays active and the app is still subject to the performance issues indicated in the warning. The issue here is that, we have use cases that require long timers, and react-native doesn't optimize for that use case.

So the net of all that is: This bug can't be fixed here we can only work around the error there are workarounds available (see Setting a timer for a long period of time, i.e. multiple minutes) that disable the warning. Doing the work to disable the warning in our code, doesn't help the issue (beyond disabling the warning), and adds additional SDK code/weight that is completely unnecessary.

I'd recommend chiming in on the issue mentioned above (i.e. facebook/react-native#12981) if you aren't comfortable w/ the workaround provided

Solution 5:

If you are using react-native 0.63 then do the followings in your App.js file: import the LogBox from react-native

import { LogBox } from 'react-native';

and after all the imports in your App.js file just add this line, it is not necessary to add this line in any useEffect call.

LogBox.ignoreLogs(['Setting a timer for a long period of time'])

See the docs to learn more.

OR

If you are using react-native 0.62 then do the followings in your App.js file: import the YellowBox from react-native

import { YellowBox } from 'react-native';