React native animated delay doesn't respect given value

Question

I'm trying to have a popup message coming down from the top of the screen, stays for some time and then goes back up out of screen. The problem is when I try to add a delay, no matter what I set the value of the delay it always delays for about 5 seconds. Here's an example:

    import React, { Component } from "react";
    import { Animated, View, Text, StyleSheet, Dimensions } from "react-native";

    export default class PopupModal extends Component {
        constructor(props) {
            super(props);

            this.state = {
                message: "Hello!",
                yTranslation: new Animated.Value(0.1)
            };
        }

        render() {
            return (
                <Animated.View style={{ ...styles.container, transform: [{ translateY: this.state.yTranslation }] }}>
                    <View style={styles.innerContainer}>
                        <Text>{this.state.message}</Text>
                    </View>
                </Animated.View>
            );
        }

        componentDidMount() {
            Animated.sequence([
                Animated.timing(this.state.yTranslation, {
                    toValue: 130,
                    duration: 500,
                    useNativeDriver: true
                }),
                Animated.timing(this.state.yTranslation, {
                    toValue: 0,
                    delay: 10, // <-- Here it doesn't matter which value I choose, it always delays for about 5 seconds.
                    duration: 500,
                    useNativeDriver: true
                })
            ]).start();
        }
    }

    const win = Dimensions.get("window");

    const styles = StyleSheet.create({
        container: {
            position: "absolute",
            bottom: win.height,
            left: 60,
            right: 60,
            alignItems: "center",
            justifyContent: "center"
        },
        innerContainer: {
            paddingHorizontal: 10,
            paddingVertical: 5,
            backgroundColor: "white",
            borderColor: "#444",
            borderWidth: 5,
            borderRadius: 10
        }
    });

React version: 16.8.3

React Native version: 0.59.9

Device: Pixel 2 (API 28) Android emulator

score 1 · Accepted Answer · answered Jul 24 '19 at 10:54

Solution:

Apparently this was a temporary environment issue. I tried this simple javascript snippet:

console.log("before: ", new Date());
setTimeout(() => {
    console.log("after: ", new Date());
}, 10);

Which output:

before:  Wed Jul 24 2019 12:37:21 GMT+0200 (centraleuropeisk sommartid)
after:  Wed Jul 24 2019 12:37:27 GMT+0200 (centraleuropeisk sommartid)

So those 10 milliseconds took about 6 seconds in time. I then uninstalled the app, restarted the emulator (full reboot) and reinstalled the app, then it worked just fine. I'm not sure what exactly fixed it but my guess is rebooting the emulator.

score 1 · Answer 2 · answered May 07 '20 at 07:58

I might have a better explanation. For some reason, delays are processed on the debug host and when the clocks of the devices are not synchronized, it breaks. (see this issue with long presses).

Proof:

Let's run this command (Linux systems and maybe MacOS) echo "Host\t\t$(date +%Y-%m-%d_%H:%M:%S)" && echo "Emulator\t$(adb shell date +%Y-%m-%d_%H:%M:%S)". It will print the date from the host system and the emulator. I receive this:

Host            2020-05-07_09:36:34
Emulator        2020-05-07_09:36:33

The difference in mine is a second, which is about the delay I am experiencing.

FIX

If you're running on an emulator, this should be simple although you need to be running a "none production build". The reason being, you need root access. Of course, this can also be done with rooted devices. Go here to configure a "none production build".

This command should synchronize the time between your host and the emulator: adb root && adb shell date "$(date +%m%d%H%M%Y.%S)" (for physical, rooted devices, you may need to run adb shell su -c date "$(date +%m%d%H%M%Y.%S)").

Now your clocks should be perfectly synchronized

Host            2020-05-07_09:50:06
Emulator        2020-05-07_09:50:06

React native animated delay doesn't respect given value

2 Answers2

Proof:

FIX