React Native 0.44 Setting a timer for a long period of time warning

[rigobcastro]

Hi,
Since I updated RN to 0.44 is appearing this alert, I thought it was for my code but I close Reactotron and it disappears magically.

Why is this happening? My code? RN? Rectotron?

Thanks!

Reactotron version: 1.10.0

Note: I visited the issue link facebook/react-native#12981 but on there everybody mention Firebase and it isnt my case

[imamatory]

I've tested it too by enabling and disabling reactotron. Same problem.

[rmevans9]

This is related to something that socket.io is doing as noted by the stacktrace in the warning. In the next major version of Reactotron Socket.io is getting replaced with regular web sockets so this issue should go away. So long as you are only setting up Reactotron in dev mode this warning should not cause you any issues in the short term.

@skellock

[nicolasZZ]

Hi, I think I found the solution:
Firstly you have to find the following file in your project: libraries/Core/Timers/JSTimer;js
Open it and you just have to change this const MAX_TIMER_DURATION_MS, to increase above your duration, in your case, above 85000

[skellock]

I saw this issue on android as well.

Short term: i'll look into socket.io to see if i can modify pingInterval.

Longer term: delete socket.io.

[RobCherry]

@skellock Any chance we can get a release with #448 in it? Very annoying when testing on android.

[skellock]

This is now available.

[fengerzh]

@skellock brew cask uninstall reactotron and brew cask install reactotron it's still 1.11.0

[skellock]

zoinks! i forgot to push to brew! pushing now... it usually takes a few hours for them to accept the PR.

[RobCherry]

Awesome, thank you!

[rigobcastro]

Thanks @skellock

[skellock]

This is our PR here:

Homebrew/homebrew-cask#35337

[stevenyap]

brew cask install is still showing 1.11.0 as of now

EDITED: Need to run brew update first

[fauzzi]

I have same issue, my OS WIN 10 and install the tron using npm

[skellock]

What version of the app? And what version of the library?

[luandro]

Getting this error on Version 1.11.0.

[Ajith-Pandian]

@skellock
Still getting this warning.
packages:
"react-native": "0.47.1"
"reactotron-react-native": "^1.12.3"

[skellock]

Ya, sorry mate, this error came back with the latest React Native.

[Ajith-Pandian]

What is the stable version of ReactNative without this error?

[skellock]

46?

[Ajith-Pandian]

No. I've checked with v 0.46.

[xanderdeseyn]

Can this be reopened? I'm still having this problem on the latest versions.

[rmevans9]

I have reopened this. I should have time later this week to check into what is going on here.

[brunobc182]

Hey guys! Any fix for this error?

[franjoSpark]

I have same issue, nothing helps

[rmevans9]

Sorry, I haven't found the time to take a look at this one yet however I have not seen this warning running RN version 48.4 and Reactotron 1.12.3. Can you guys that are seeing this report the specific versions of RN and Reactotron you are using?

[BobAleena]

I am getting this on RN 0.49.5
I do not have reactotron installed

[skellock]

It happens on React Native apps on android where a timer is set for longer than x. That x used to be a minute-ish. Now it is less. I'm unclear what the recommend solution from React Native is supposed to be.

I've seen others suggest a library wrapper for timers on Android, but I dunno.

[BobAleena]

I haven't set any timers either. I have a very basic app (intro example) which is just reading 2 or 3 items from the db and listing them in to do list. the warning shows up right off the bat on startup.

[skellock]

You don’t necessarily need to start the timer. It’s any library that has a timer. Like socket.io or Firebase among others.

[BobAleena]

Ah ok. Yes I am using Firebase so that may be it

[franjoSpark]

I'm also have this issue with socket.io-client and I'm wondering what happening with warning in production build?

…

On 31 Oct 2017 09:27, "BobAleena" ***@***.***> wrote: Ah ok. Yes I am using Firebase so that may be it — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#432 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYCUkA0az1SeF7OFZKR7MKIZ58IRbEzfks5sxtnggaJpZM4NhH3M> .

[skellock]

That warning only happens in dev builds.

I think what the React Native team is trying to say is that on Android, long running timers are best handled with a native solution and not via javascript.

I'm not sure there's any specific guidance from them other than that. This is why it's confusing. At least to me it is. =)

[poongnewga]

@franjoSpark I also had same issue with socket.io-client in dev builds.
There were no warnings in production build, however there were some performance differences between Android and iOS :( iOS had better performance with my real-time chat application.

[phatnguyenbg]

constructor() {
super();

 console.ignoredYellowBox = [
     'Setting a timer'
 ];

}

OR

import BackgroundTimer from 'react-native-background-timer';

setTimeout = BackgroundTimer.setTimeout.bind(BackgroundTimer)
setInterval = BackgroundTimer.setInterval.bind(BackgroundTimer)
clearTimeout = BackgroundTimer.clearTimeout.bind(BackgroundTimer)
clearInterval = BackgroundTimer.clearInterval.bind(BackgroundTimer)

[rochapablo]

@phatnguyenbg works only at the first time. When the modal is called it appears =/

[thadeu]

Reinstalled Reactotron version v1.11.2 solved my problem.

[pallavbakshi]

In reference to the answer provided above by @skellock.

For anyone who is facing this issue because of socket.io on React-Native then you need to edit the server side code like:

...
var server = require('http').createServer(app);
var io = require('socket.io')(server, { pingTimeout: 30000 });
...

Note - I am using express with socket.io on server and socket.io-client on react-native.

[kutsan]

@pallavbakshi Thanks, solved my problem. I had been using socket.io with React Native.

[muganwas]

@phatnguyenbg you saved my life. many thanks.
The warning was driving me crazy. It started when I decided to use rebase in a native project.
Btw is there anything like RNrebase??

[clayrisser]

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);
  }
};

[clayrisser]

I've encapsulated the previous logic into two npm modules, one for general node/javascript and one for react-native.

The react-native module is compatible with expo apps.

https://github.com/jamrizzi/ignore-warnings
https://www.npmjs.com/package/ignore-warnings
https://github.com/jamrizzi/react-native-ignore-warnings
https://www.npmjs.com/package/react-native-ignore-warnings

You would use it the following way . . .

import ignoreWarnings from 'react-native-ignore-warnings';
ignoreWarnings('Setting a timer');

[cmcaboy]

@jamrizzi This did not work. I get an undefined is not a function error on the ignoreWarnings function.

[clayrisser]

@cmcaboy I'm sorry it's not working. Could you file it as an issue at https://github.com/jamrizzi/react-native-ignore-warnings/issues. I would definitely love to figure out what the bug is and fix it.

[lucasltv]

@pallavbakshi thanks!! Works for me... Im using Socket.io with RN.

[skellock]

2.x drops socket.io. 👋

[TheJuanBM]

1) Go to

node_modules/react-native/Libraries/Core/Timer/JSTimers.js

2) Change

before: MAX_TIMER_DURATION_MS = 60 * 1000
after: MAX_TIMER_DURATION_MS = 10000 * 1000

[TodorovStanimir]

I use firebase and had the same issue. I solved it using recursion, in this way:

1. When I loging user, I store userData in AsyncStorage with function:

const saveDataToStorage = (token, userId, expirationDate, user) => {
  AsyncStorage.setItem(
    'userData',
    JSON.stringify({
      token: token,
      userId: userId,
      expiryDate: expirationDate.toISOString(),
      user: user,
    })
  );
};

and set up a logout timer with this function:

const setLogoutTimer = () => 
   (dispatch) => {
    timer = setTimeout(async () => {
      const userData = await AsyncStorage.getItem('userData');
      const { expiryDate } = JSON.parse(userData);
      if (new Date(expiryDate).getTime() <= new Date().getTime()) {
        dispatch(logout());
      } else {
        clearTimeout(timer);
        dispatch(setLogoutTimer());
      }
    }, 6000);
};

2. My login function is:

export const login = (email, password) => async (dispatch) => {
  try {
    const response = await fetch(
      `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${API_KEY}`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email, password, returnSecureToken: true }),
      }
    );

    if (!response.ok) {
      const errorResData = await response.json();
      const errorId = errorResData.error.message;
      let message = 'Something went wrong!';

      if (errorId === 'EMAIL_NOT_FOUND') {
        message = 'This email could not be found!';
      } else if (errorId === 'INVALID_PASSWORD') {
        message = 'This password is not valid!';
      } else if (errorId.startsWith('TOO_MANY_ATTEMPTS_TRY_LATER')) {
        message = errorId.split(' : ')[1];
      }

      throw new Error(message);
    }

    const respData = await response.json();

    dispatch(
      authenticate(
        respData.localId,
        respData.idToken,
        respData,
        parseInt(respData.expiresIn) * 1000
      )
    );

    const expirationDate = new Date(
      new Date().getTime() + 15 * 1000
    );
    saveDataToStorage(
      respData.idToken,
      respData.localId,
      expirationDate,
      respData
    );
  } catch (err) {
    throw err;
  }
};

3. authenticate functions is:

export const authenticate = (userId, token, user, expiryTime) => (dispatch) => {
  dispatch(setLogoutTimer(expiryTime));
  dispatch({ type: AUTHENTICATE, userId, token, user });
};

4. logout function is:

export const logout = () => {
  clearLogoutTimer();
  AsyncStorage.removeItem('userData');
  return { type: LOGOUT };
};

5. clearLogoutTimer is:

const clearLogoutTimer = () => {
  if (timer) {
    clearTimeout(timer);
  }
};

The variable timer is declared on top level of the file consists all described functions, in this way let timer;
In my case the delay is set up to 6000 ms. It can be increased to 60000 ms, but this mean that logout function can be invoked with max delay of 59 seconds after the token expired.