title: React native animation not working as intended
body: <p>I have a problem and would like some help.
  So I have multiple touchables or buttons when pressed moves itself down. I am using the same method to move all buttons and to differentiate which button is pressed I am using a state variable. Here is where the problem comes, if I press the first button it works as intended but when I press the 2nd button it only resets the position but doesn't move. Another thing that I found was that if I start doing it from last to the first button it works as intended.
  I have posted my code. Any help is appreciated.</p>
  
  <pre><code>import React from 'react';
  import {
    View,
    TouchableOpacity,
    Animated,
    Easing,
  } from 'react-native';
  
  class Barakhari extends React.Component {
  
  
  
  constructor() {
      super();
      this.animatedValue = new Animated.Value(0);
      this.state = {
        i: null
      };
    }
  
    drop(x) {
      console.log('b4 press:', this.state.i)
      this.animatedValue.setValue(0);
      this.setState({ i : x})
      Animated.timing(this.animatedValue, {
        toValue: 1,
        duration: 500,
        easing: Easing.ease
      }).start(() =&gt;console.log('after press:', this.state.i));
    }
  
    render() {
      const top = this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 100]
      });
      return (
          &lt;View
            style={{
              height: '100%',
              width: '100%',
              borderWidth: 1,
              borderColor: 'red'
            }}
          &gt;
            &lt;View
              style={{
                height: '10%',
                width: '100%',
                borderWidth: 1,
                borderColor: 'white',
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-evenly'
              }}
            &gt;
              &lt;TouchableOpacity onPress={() =&gt; this.drop(1)}&gt;
                &lt;Animated.View
                  style={{ top: this.state.i === 1 ? top : 0, height: 40, width: 40, backgroundColor: 'red' }}
                /&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; this.drop(2)}&gt;
                &lt;Animated.View
                  style={{ top: this.state.i === 2 ? top : 0, height: 40, width: 40, backgroundColor: 'green' }}
                /&gt;
              &lt;/TouchableOpacity&gt;
              &lt;TouchableOpacity onPress={() =&gt; this.drop(3)}&gt;
                &lt;Animated.View
                  style={{ top: this.state.i === 3 ? top : 0, height: 40, width: 40, backgroundColor: 'blue' }}
                /&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
          &lt;/View&gt;
          );
        }
      }
  
  export { Barakhari };
  </code></pre>