CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativeanimation
Srki
Srki

Reputation: 385

Disable the button during the animation in React-Native

I'm trying to create an app that starts animation after a button click and disables the button while the animation is running. I want to be able to use it multiple times by pressing the button, disabling it, running animation, then reenabling it. So far, I have a button that gets disabled when I press it and then after that I run an animation (blue square moves to the right and then back to starting position), or at least that's what I was hoping for. The reality of the situation is that when a button is pressed, it becomes disabled but no animation occurs. Upon further investigation, I found that the problem results from the use of setState while the animation is active. For example, if you setState while the animation is running, the animation will just stop. However, I don't understand why setting state before animation begins doesn't work either. I'm using Animated.View and this is my code:

import React, { useState } from 'react'
import { Animated, View, Button } from 'react-native';

export default function App() {
  const [dis,setDis] = useState(false)
  const animatedMargin = new Animated.Value(0);
  const slideAnimation = () => {
    Animated.timing(animatedMargin, { //go right
      toValue: 200,
      duration: 1000,
      useNativeDriver: false 
    }).start()
    setTimeout(() => {
      Animated.timing(animatedMargin, { //return left
        toValue: 0,
        duration: 1000,
        useNativeDriver: false 
      }).start()
    }, 1000);
    setTimeout(() => { setDis(false) }, 2000); //enable button
  }
  return (
    <View style={{ marginTop:50 }}>
      <Animated.View style={{ left: animatedMargin }}>
        <View style={{ backgroundColor:'#00f', height:50, width:50 }}/>
      </Animated.View>
        <Button title='go' disabled={dis}
          onPress={()=>{
            setDis(true),
            slideAnimation()
          }}
        ></Button>
    </View>
  );
}

If I don't use parts of code for disabling and enabling buttons, the animation works fine.

Upvotes: 0

Views: 1350

Answers (1)

Leri Gogsadze
Leri Gogsadze

Reputation: 3093

Seems that problem is animated value here. Just wrap it by useRef like so:

const animatedMargin = React.useRef(new Animated.Value(0)).current;

For example, if your animated value changes from 0 to 1 in 500 ms, when you change state (re-render component) a new instance will be created and lose the current progress, that's why you need to wrap it by the useRef hook to create an instance only once.

Upvotes: 2

Related Questions