react-native-halloween-spinAndspring.js

class Pumpkin extends Component {
  constructor() {
    super();
    this.state = {
      isPressed: true
    };
    this.springValue = new Animated.Value(0.3);
    this.spinValue = new Animated.Value(0);
  }

  componentDidMount() {
      this.spin();
  }

  spin() {
    this.spinValue.setValue(0);
    Animated.timing(this.spinValue, {
      toValue: 1,
      duration: 4000,
      easing: Easing.linear
    }).start(() => this.spin());
  }

  handletoggle() {
    this.setState(prevState => ({ isPressed: !prevState.isPressed }));
  }

  spring() {
    this.handletoggle();
    this.springValue.setValue(0.3);
    Animated.spring(this.springValue, {
      toValue: 0.7,
      friction: 1
    }).start(() => setTimeout(() => this.resetSpring(), 700));
  }
  resetSpring() {
    this.springValue.setValue(1);
    Animated.spring(this.springValue, {
      toValue: 0.3,
      friction: 1
    }).start(() => this.handletoggle());
  }

  render() {
    const spin = this.spinValue.interpolate({
      inputRange: [0, 1],
      outputRange: ["0deg", "360deg"]
    });
    let { isPressed } = this.state;
    const { height, width } = this.props;

    return (
      <TouchableHighlight onPress={isPressed ? this.spring.bind(this) : null}>
        <Animated.Image
          source={require("./img/pumkin.gif")}
          style={{
            width,
            height,
            transform: [{ scale: this.springValue }, { rotate: spin }]
          }}
        />
      </TouchableHighlight>
    );
  }
}
// ...
class MainPage extends Component {
  render() {
    return (
      <FadeIn>
        <View style={{ flexDirection: "row", marginTop:100 }}>
          <Pumpkin height={70} width={70} spin={true}/>
          <Pumpkin height={150} width={150} spin={false} />
          <Pumpkin height={120} width={120}  spin={true}/>
          <Pumpkin height={70} width={70} spin={true}/>
        </View>
      </FadeIn>
    );
  }
}