CompleteComponentBare.js

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

export default class CompleteComponent extends PureComponent {
  state = {
    counter: 1
  };

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

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

CounterBare.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() {
    return (
      <Animated.View style={[styles.counterDisplayStyle]}>
        <Animated.Text style={[styles.textStyle]}>
          {this.props.counter}
        </Animated.Text>
      </Animated.View>
    );
  }
}

Counter.propTypes = {
  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
  }
};

MinusButtonBare.js

import React, { PureComponent } from 'react';
import { View, Text, Animated, TouchableWithoutFeedback } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';

export default class MinusButton extends PureComponent {
  render() {
    return (
      <TouchableWithoutFeedback>
        <Animated.View style={styles.counterDecrementStyle}>
          <Icon name="ios-remove" size={30} color={'rgb(130, 130, 130)'} />
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = {
  counterDecrementStyle: {
    borderRadius: 30,
    width: 60,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    shadowOpacity: 0.3,
    shadowOffset: { x: 0, y: 2 },
    shadowColor: 'black',
    backgroundColor: 'white',
    borderColor: 'rgb(130, 130, 130)',
    borderWidth: 3
  }
};