CODEWITHSUNDEEP
javascriptreact-native
Bartek Spitza
Bartek Spitza

Reputation: 305

Animation callback executes before finished

I have trouble with executing a function after my animation finishes.

I am making a simple ToDo app and when the user wants to delete a task, I want it to fade away and then call my function which removes it entirely using setState in parent component. I have tried researching this myself but to no avail. So the problem is that the task view just disappears instantly instead of waiting for the animation to finish.

deletePressed() {
    Animated.timing(
        this.state.fadeIn,
        {
        toValue: 0,
        duration: 300,
        }
    ).start(this.props.action());
}

this.props.action

deleteTask(name) {
    const temp = this.state.tasks;
    if (temp.includes(name)) {
        const indx = temp.indexOf(name);
        temp.splice(indx, 1);
        this.setState({ tasks: temp });
    }
}

Upvotes: 0

Views: 79

Answers (2)

Lucien Perouze
Lucien Perouze

Reputation: 650

I think it's because you're not providing a function as a callback to start() but sthe result of a function when you do .start(this.props.action()); so it calls the funtion when defining it.

You should pass it like this : .start(this.props.action); or like this .start(() => this.props.action()); then its the funtion itself that is passed.

Upvotes: 0

Aaditya Thakkar
Aaditya Thakkar

Reputation: 1820

Instead of giving a callback, you are calling the function itself, that's why it gets executed before animation completes. This should work.

deletePressed() {
    Animated.timing(
        this.state.fadeIn,
        {
        toValue: 0,
        duration: 300,
        }
    ).start(this.props.action);
}

Upvotes: 1

Related Questions