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

saeedhei · 2017-07-14T19:31:17Z

I want to use firebase auth with react native for Login and Signup but I got a yellow error:
Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See (facebook/react-native#12981) for more info. (Saw setTimeout with duration 111862ms)

How Can I Fix That?
I don't want to ignore that, I want to understand this error and solve that with the best and Standard way.
And This is my Code:

 export default class Login extends Component {
        constructor(props) {
            super(props)
            this.state = {
                email: '',
                password: '',
                response: ''
            }
            this.signUp = this.signUp.bind(this)
            this.login = this.login.bind(this)
        }
        async signUp() {
            try {
                await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
                this.setState({
                    response: 'Account Created!'
                })
                setTimeout(() => {
                    this.props.navigator.push({
                        id: 'App'
                    })
                }, 1500)
            } catch (error) {
                this.setState({
                    response: error.toString()
                })
            }
        }
        async login() {
            try {
                await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
                this.setState({
                    response: 'user login in'
                })
                setTimeout(() => {
                    this.props.navigator.push({
                        id: 'App'
                    })
                })

            } catch (error) {
                this.setState({
                    response: error.toString()
                })
            }

        }
        render() {
            return (
                <View style={styles.container}>
                    <View style={styles.containerInputes}>
                        <TextInput
                            placeholderTextColor="gray"
                            placeholder="Email"
                            style={styles.inputText}
                          //  onChangeText={(email) => this.setState({ email })}
                            onChangeText={(email) => {console.log(email);}}
                        />
                        <TextInput
                            placeholderTextColor="gray"
                            placeholder="Password"
                            style={styles.inputText}
                            password={true}
                            onChangeText={(password) => this.setState({ password })}
                        />
                    </View>
                    <TouchableHighlight
                        onPress={this.login}
                        style={[styles.loginButton, styles.button]}
                    >
                        <Text
                            style={styles.textButton}
                        >Login</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        onPress={this.signUp}
                        style={[styles.loginButton, styles.button]}
                    >
                        <Text
                            style={styles.textButton}
                        >Signup</Text>
                    </TouchableHighlight>
                </View>
            )
        }
    }

I Asked From Stackoverflow too, Link

The text was updated successfully, but these errors were encountered:

google-oss-bot · 2017-07-14T19:31:20Z

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

google-oss-bot · 2017-07-14T19:31:20Z

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

bojeil-google · 2017-07-14T20:47:06Z

I assume you are including real-time database in your code?
We pro-actively refresh the token when database or other Firebase services are included. The token typically has a lifetime of one hour. We would need to use some other native utility or external dependency to replace the underlying setTimeout usage for this. This will take some time to implement. It seems benign for now so I see this as a low priority.

saeedhei · 2017-07-14T21:02:38Z

Yeah I'm using real-time database and when I added firebase to my project, I got This

Thank you @bojeil-google

justColbs · 2017-08-07T21:07:05Z

@bojeil-google Could you please update here when this has been resolved? Thank you!

andy-awsdev7 · 2017-08-15T19:21:51Z

constructor() {
super();
console.ignoredYellowBox = [
'Setting a timer'
];
}

liketurbo · 2017-08-15T20:52:27Z

I wonder, this issue show up only in Android, and maybe it's caused by using react-navigator, I say this, because once I all repeat from tutorial and tutor doesn't get this error and only difference between our works it's I use react-navigator instead react-native-router-flux and I work with Android instead IOS

liketurbo · 2017-08-16T11:33:24Z

Maybe, we could throw this code below in to the project, and reset all setTimeout ?

const highestTimeoutId = setTimeout(() => ';');
for (let i = 0; i < highestTimeoutId; i++) {
    clearTimeout(i); 
}
// source: https://stackoverflow.com/questions/3847121/how-can-i-disable-all-settimeout-events

saeedhei · 2017-10-23T16:14:22Z

When will This issue be resolved?

bojeil-google · 2017-10-23T17:30:56Z

There are bunch of high priority features and bug fixes in the pipeline. We'll switch to this issue immediately after. It's been labeled as a P3 issue which is appropriate for its severity.

mutazmq · 2017-11-25T15:24:49Z

Hello guys, any update on this issue please? I have not been able to use Firebase on Android because of it.

mopx · 2017-11-25T15:35:41Z

Using the native sdk instead of the js/web sdk fixes the problem.

https://github.com/invertase/react-native-firebase

It involves a lot more configuration and it won’t work with Expo tho.

bojeil-google · 2017-11-26T00:42:11Z

My understanding is that this is not a blocking issue and can be suppressed.
I will try to experiment with a quick solution using react-native-background-timer and report back.

bojeil-google · 2017-11-28T03:46:51Z

Ok, I tried testing this issue with react native 0.48.4 and firebase 4.6.2 using an Android emulator (API 25) and I was not able to replicate this. I am not getting the warning at all.

Narutuffy · 2017-11-28T05:17:55Z

I am still getting this warning

bojeil-google · 2017-11-28T07:38:32Z

Can you provide more detailed information about your environment to facilitate replication?

bogannathan · 2017-11-28T14:07:56Z

I use Expo and get this error. Perhaps it is specific to Expo, which may be why you did not get an error on your emulator.

…

On Tue, Nov 28, 2017 at 2:38 AM, bojeil-google ***@***.***> wrote: Can you provide more detailed information about your environment to facilitate replication? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#97 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AdTknxE4yq8eD5wXOenm_14wg7o8KCJ1ks5s67h7gaJpZM4OYphr> .

bojeil-google · 2017-11-28T18:32:16Z

I also used expo version ^21.0.0.

clayrisser · 2018-03-08T11:12:49Z

@brunolemos, I totally agree with you. But it definitely is nice to be able to hide the warnings while waiting for a proper fix.

metavaults · 2018-03-17T13:53:11Z

There is no fix yet? So many people have this problem!

CodingBitsDev · 2018-03-22T21:00:34Z

I have the exact same problem as @colinwong
I thought about switching to the realtime database, but the issue seems to be there as well.

As it is right now firebase and expo seem to be unusable together.

pmdlt · 2018-03-25T17:09:17Z

@colinwong @LukasNavickas @Renji3 This problem is "normal" and has nothing to do with the timer error. Firestore is not supported by React Native (#283). The only solutions : Using Firebase Realtime Database or https://github.com/invertase/react-native-firebase (which is not compatible with Expo).

jshcrowthe · 2018-04-16T19:04:47Z

Hey folks, figured I'd chime in here.

Ultimately the fix needs to be made on the react-native side as indicated in the message

See (facebook/react-native#12981)

There is a workaround for the warning that you are seeing that @bojeil-google mentioned that we could implement.

i.e.

I have found and successfully tested a workaround for this using multi-step short duration setTimeouts but this will only fix the issue from the auth side of things. Database also uses long duration setTimeouts too. So the firebase core should provide this common implementation.

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 https://stackoverflow.com/questions/44603362/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.

denimar · 2018-05-10T02:25:30Z

Maybe the best way to go through this problem is by changing JSTimers.js until they really fix it

SKempin · 2018-07-01T19:12:40Z

facebook/react-native#12981 (comment) has a cleaner temporary fix for this.

usfslk · 2018-10-01T23:07:06Z

We really need a solution for this.
I am getting the warning when using firebase authentication and realtime database

"expo": "^30.0.1",
"firebase": "^5.5.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",

minhdang-idev · 2018-10-05T11:46:56Z

Same problem here. I am using 30.0.1 and firebase 5.5.2.

cristo-rabani · 2018-10-05T22:09:14Z

Work around issue with yellow warning 'Setting a timer' .

copy & import following file (as fast as you can ;-))

import {Platform, InteractionManager} from 'react-native';

const _setTimeout = global.setTimeout;
const _clearTimeout = global.clearTimeout;
const MAX_TIMER_DURATION_MS = 60 * 1000;
if (Platform.OS === 'android') {
// Work around issue `Setting a timer for long time`
// see: https://github.com/firebase/firebase-js-sdk/issues/97
    const timerFix = {};
    const runTask = (id, fn, ttl, args) => {
        const waitingTime = ttl - Date.now();
        if (waitingTime <= 1) {
            InteractionManager.runAfterInteractions(() => {
                if (!timerFix[id]) {
                    return;
                }
                delete timerFix[id];
                fn(...args);
            });
            return;
        }

        const afterTime = Math.min(waitingTime, MAX_TIMER_DURATION_MS);
        timerFix[id] = _setTimeout(() => runTask(id, fn, ttl, args), afterTime);
    };

    global.setTimeout = (fn, time, ...args) => {
        if (MAX_TIMER_DURATION_MS < time) {
            const ttl = Date.now() + time;
            const id = '_lt_' + Object.keys(timerFix).length;
            runTask(id, fn, ttl, args);
            return id;
        }
        return _setTimeout(fn, time, ...args);
    };

    global.clearTimeout = id => {
        if (typeof id === 'string' && id.startsWith('_lt_')) {
            _clearTimeout(timerFix[id]);
            delete timerFix[id];
            return;
        }
        _clearTimeout(id);
    };
}

SMKH-PRO · 2018-12-07T23:48:52Z

still getting this error :/ apps getting crashed due to this..!

cristo-rabani · 2018-12-08T10:48:59Z

Did you add 'fix code' before first setTimeout was used?

MAfzalKhan1997 · 2018-12-21T16:39:59Z

Did you add 'fix code' before first setTimeout was used?

Work around issue with yellow warning 'Setting a timer' .

copy & import following file (as fast as you can ;-))

import {Platform, InteractionManager} from 'react-native';

const _setTimeout = global.setTimeout;
const _clearTimeout = global.clearTimeout;
const MAX_TIMER_DURATION_MS = 60 * 1000;
if (Platform.OS === 'android') {
// Work around issue `Setting a timer for long time`
// see: https://github.com/firebase/firebase-js-sdk/issues/97
    const timerFix = {};
    const runTask = (id, fn, ttl, args) => {
        const waitingTime = ttl - Date.now();
        if (waitingTime <= 1) {
            InteractionManager.runAfterInteractions(() => {
                if (!timerFix[id]) {
                    return;
                }
                delete timerFix[id];
                fn(...args);
            });
            return;
        }

        const afterTime = Math.min(waitingTime, MAX_TIMER_DURATION_MS);
        timerFix[id] = _setTimeout(() => runTask(id, fn, ttl, args), afterTime);
    };

    global.setTimeout = (fn, time, ...args) => {
        if (MAX_TIMER_DURATION_MS < time) {
            const ttl = Date.now() + time;
            const id = '_lt_' + Object.keys(timerFix).length;
            runTask(id, fn, ttl, args);
            return id;
        }
        return _setTimeout(fn, time, ...args);
    };

    global.clearTimeout = id => {
        if (typeof id === 'string' && id.startWith('_lt_')) {
            _clearTimeout(timerFix[id]);
            delete timerFix[id];
            return;
        }
        _clearTimeout(id);
    };
}

This worked for me ... pretty solution !

cpmech · 2019-01-09T03:23:35Z

The problem persists, unfortunately...

cpmech · 2019-01-09T04:34:28Z

Work around issue with yellow warning 'Setting a timer' .

copy & import following file (as fast as you can ;-))

import {Platform, InteractionManager} from 'react-native';

const _setTimeout = global.setTimeout;
const _clearTimeout = global.clearTimeout;
const MAX_TIMER_DURATION_MS = 60 * 1000;
if (Platform.OS === 'android') {
// Work around issue `Setting a timer for long time`
// see: https://github.com/firebase/firebase-js-sdk/issues/97
    const timerFix = {};
    const runTask = (id, fn, ttl, args) => {
        const waitingTime = ttl - Date.now();
        if (waitingTime <= 1) {
            InteractionManager.runAfterInteractions(() => {
                if (!timerFix[id]) {
                    return;
                }
                delete timerFix[id];
                fn(...args);
            });
            return;
        }

        const afterTime = Math.min(waitingTime, MAX_TIMER_DURATION_MS);
        timerFix[id] = _setTimeout(() => runTask(id, fn, ttl, args), afterTime);
    };

    global.setTimeout = (fn, time, ...args) => {
        if (MAX_TIMER_DURATION_MS < time) {
            const ttl = Date.now() + time;
            const id = '_lt_' + Object.keys(timerFix).length;
            runTask(id, fn, ttl, args);
            return id;
        }
        return _setTimeout(fn, time, ...args);
    };

    global.clearTimeout = id => {
        if (typeof id === 'string' && id.startWith('_lt_')) {
            _clearTimeout(timerFix[id]);
            delete timerFix[id];
            return;
        }
        _clearTimeout(id);
    };
}

it seems to work but I had to replace startWith by startsWith

thanks

malikimran34 · 2019-01-29T11:23:08Z

an old issue in firebase still waiting for a proper fix

moGeekHex · 2019-01-31T12:01:40Z

this warning from socket firebase add that code to the App file to get rid of that warning
console.ignoredYellowBox = [
'Setting a timer'
];

rauldeheer · 2019-02-25T19:31:05Z

Is this getting fixed any time soon? I have the same issue and I see it has been here since 2017. I'm using Expo SDK v32 and I'm not using the realtime database but rather the Firebase Firestore.

carlosenambam · 2019-03-08T04:58:31Z

My friends I had the same error just 20 minutes ago and I figured out the cause of the error, I had to define a value for the iterations param in the Animated.loop function:

const animation = Animated.loop( Animated.timing(animatedRotation, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: true }), { iterations: 20 // Just add a reasonable value here } );

By default the value of the "iterations" param is -1, meaning the animation will run with infinite loops, but this feature is implemented by using a setTimeOut function with a big number of seconds in order to run the animation 'infinite' times.

Problem Solved

HOllarves · 2019-03-26T12:46:16Z

My friends I had the same error just 20 minutes ago and I figured out the cause of the error, I had to define a value for the iterations param in the Animated.loop function:

const animation = Animated.loop( Animated.timing(animatedRotation, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: true }), { iterations: 20 // Just add a reasonable value here } );

By default the value of the "iterations" param is -1, meaning the animation will run with infinite loops, but this feature is implemented by using a setTimeOut function with a big number of seconds in order to run the animation 'infinite' times.

Problem Solved

Could yo explain a bit more about your solution? I actually never declare an animation variable in my app.

Let's just hope a proper bug fix comes.
Thanks!

mikecappie · 2019-03-27T09:49:56Z

Has anyone managed to find a fix for this yet? It doesn't prevent development or stop the app working but it's a bit of a pain and I don't like the idea of just supressing an underlying issue, I will for now though.

SohamToraskar · 2019-04-22T12:48:56Z

To sort this out you need to hard code the value, increase the value of the variable MAX_TIMER_DURATION_MS. Here are the steps:

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

Look for the variable MAX_TIMER_DURATION_MS

Change 60 * 1000 to 10000 * 1000

Save the changes and re-build your app.

This worked for me.
https://stackoverflow.com/a/46678121

google-oss-bot added the needs-triage label Jul 14, 2017

saeedhei mentioned this issue Jul 15, 2017

Add support for AlarmManager in Timing to allow proper handling of long timers facebook/react-native#12981

Closed

hiranya911 added api: auth priority: p2 and removed needs-triage labels Jul 17, 2017

mcnamee mentioned this issue Sep 22, 2017

Chrome Debugging doesn't load the app from launch screen mcnamee/react-native-starter-kit#103

Closed

jshcrowthe added Priority: p3 Status: Available and removed priority: p2 labels Oct 4, 2017

samsafay mentioned this issue Nov 7, 2017

FR: Firestore Web SDK React-Native/Expo support for Android devices #283

Closed

siennamoshe mentioned this issue Nov 15, 2017

Look into geofire/ geo searching explr-bucknell/explr#40

Closed

bojeil-google self-assigned this Nov 26, 2017

jshcrowthe closed this as completed Apr 16, 2018

usfslk unassigned jshcrowthe Oct 1, 2018

trollevsy mentioned this issue Nov 16, 2018

Warning when running on Android: "Setting a timer for a long period of time, i.e. multiple minutes..." samhamra/friska-react-native#16

Closed

jbpayne mentioned this issue Feb 21, 2019

Added action type and updated message for reset password, also reducer for logout codeforbtv/cvoeo-app#54

Merged

Undeadlol1 mentioned this issue May 11, 2019

Fix firebase warnings. mcnamee/react-native-starter-kit#218

Closed

wayne-li2 mentioned this issue Sep 7, 2019

Android devices get a timer warning CalNourish/ucbfpa-mobile#30

Open

firebase locked and limited conversation to collaborators Oct 26, 2019

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

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

Comments

saeedhei commented Jul 14, 2017

google-oss-bot commented Jul 14, 2017

google-oss-bot commented Jul 14, 2017

bojeil-google commented Jul 14, 2017

saeedhei commented Jul 14, 2017

justColbs commented Aug 7, 2017

andy-awsdev7 commented Aug 15, 2017 • edited Loading

liketurbo commented Aug 15, 2017

liketurbo commented Aug 16, 2017

saeedhei commented Oct 23, 2017

bojeil-google commented Oct 23, 2017

mutazmq commented Nov 25, 2017

mopx commented Nov 25, 2017

bojeil-google commented Nov 26, 2017

bojeil-google commented Nov 28, 2017

Narutuffy commented Nov 28, 2017

bojeil-google commented Nov 28, 2017

bogannathan commented Nov 28, 2017 via email

bojeil-google commented Nov 28, 2017

clayrisser commented Mar 8, 2018

metavaults commented Mar 17, 2018

CodingBitsDev commented Mar 22, 2018 • edited Loading

pmdlt commented Mar 25, 2018 • edited Loading

jshcrowthe commented Apr 16, 2018

denimar commented May 10, 2018

SKempin commented Jul 1, 2018

usfslk commented Oct 1, 2018

minhdang-idev commented Oct 5, 2018

cristo-rabani commented Oct 5, 2018 • edited Loading

SMKH-PRO commented Dec 7, 2018

cristo-rabani commented Dec 8, 2018

MAfzalKhan1997 commented Dec 21, 2018 • edited Loading

cpmech commented Jan 9, 2019

cpmech commented Jan 9, 2019

malikimran34 commented Jan 29, 2019

moGeekHex commented Jan 31, 2019

rauldeheer commented Feb 25, 2019

carlosenambam commented Mar 8, 2019

HOllarves commented Mar 26, 2019

mikecappie commented Mar 27, 2019

SohamToraskar commented Apr 22, 2019 • edited Loading

andy-awsdev7 commented Aug 15, 2017 •

edited

Loading

CodingBitsDev commented Mar 22, 2018 •

edited

Loading

pmdlt commented Mar 25, 2018 •

edited

Loading

cristo-rabani commented Oct 5, 2018 •

edited

Loading

MAfzalKhan1997 commented Dec 21, 2018 •

edited

Loading

SohamToraskar commented Apr 22, 2019 •

edited

Loading