在 React-Native 中的 animation 期间禁用按钮

Question

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.

Answer 1

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

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