FullCompleteComponent.js

import React, { PureComponent } from 'react';
import { View, Text, Animated, TouchableWithoutFeedback } from 'react-native';
import AddButton from './AddButton';
import MinusButton from './MinusButton';
import Counter from './Counter';

export default class CompleteComponent extends PureComponent {
  state = {
    animationValue: new Animated.Value(0),
    counterAnimation: new Animated.Value(0),
    shakeMotion: new Animated.Value(0),
    counter: 1,
    open: false,
  };

  // this is the function called when the AddButton is pressed
  // Basically, if its not "open" yet, we use timing to move the animationValue from 0 to 1 over 500ms
  // Else, we call incrementNumber() below
  animateCircle = () => {
    if (this.state.open) {
      this.incrementNumber();
    } else {
      Animated.timing(this.state.animationValue, {
        toValue: 1,
        duration: 500
      }).start(() => this.setState({ open: true }));
    }
  };

  animateCounterAnimation = () => {
    Animated.timing(this.state.counterAnimation, {
      toValue: 1,
      duration: 250
    }).start(() => this.state.counterAnimation.setValue(0));
  };

  shakeMotionAnimation = () => {
    Animated.timing(this.state.shakeMotion, {
      toValue: 1,
      duration: 250
    }).start(() => this.state.shakeMotion.setValue(0));
  };

  decreaseNumber = () => {
    if (this.state.counter > 0) {
      this.setState({ counter: this.state.counter - 1 });
      this.animateCounterAnimation();
    } else {
      this.shakeMotionAnimation();
    }
  };
  

  incrementNumber = () => {
    this.setState({ counter: this.state.counter + 1 });
    this.animateCounterAnimation();
  };

  render() {
    return (
      <View style={styles.container}>
        <Counter
          counterAnimation={this.state.counterAnimation}
          shakeMotion={this.state.shakeMotion}
          counter={this.state.counter}
          animationValue={this.state.animationValue}
        />
        <MinusButton
          animationValue={this.state.animationValue}
          decreaseNumber={this.decreaseNumber}
        />
        <AddButton animationValue={this.state.animationValue} animateCircle={this.animateCircle} />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
};

FullCounter.js

import React, { PureComponent } from 'react';
import { View, Animated, Text } from 'react-native';
import PropTypes from 'prop-types';

export default class Counter extends PureComponent {
  render() {
    const textStyle = this.props.counterAnimation.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: [1, 1.5, 1]
    });

    const textStyleTransform = {
      transform: [{ scale: textStyle }]
    };

    const shakeMotionTransform = {
      transform: [
        {
          translateX: this.props.shakeMotion.interpolate({
            inputRange: [0, 0.08, 0.25, 0.41, 0.58, 0.75, 0.92, 1],
            outputRange: [0, -10, 10, -10, 10, -5, 5, 0]
          })
        }
      ]
    };

    const counterDisplayTransforms = {
      transform: [
        {
          translateX: this.props.animationValue.interpolate({
            inputRange: [0, 1],
            outputRange: [120, 100]
          })
        }
      ]
    };

    const conditionalStyle = () =>
      this.props.counter > 0 ? textStyleTransform : shakeMotionTransform;

    return (
      <Animated.View style={[styles.counterDisplayStyle, counterDisplayTransforms]}>
        <Animated.Text style={[styles.textStyle, conditionalStyle()]}>
          {this.props.counter}
        </Animated.Text>
      </Animated.View>
    );
  }
}

Counter.propTypes = {
  counterAnimation: PropTypes.object,
  shakeMotion: PropTypes.object,
  animationValue: PropTypes.object,
  counter: PropTypes.number
};

const styles = {
  counterDisplayStyle: {
    backgroundColor: 'rgb(240,240,240)',
    borderRadius: 30,
    borderColor: 'rgb(240,240,240)',
    borderWidth: 1,
    width: 60,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center'
  },
  textStyle: {
    fontSize: 28
  }
};