occ-mobile/app/components/Bubble.js

import React, { Children } from 'react'
import { StyleSheet, View, Text } from 'react-native'
import PropTypes from 'prop-types'

export default class Bubble extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  static propTypes = {
    size: PropTypes.number,
    bubbleColor: PropTypes.string,
    value: PropTypes.number,
    textColor: PropTypes.string,
    style: PropTypes.object,
    fontSize: PropTypes.number,
  }
  static defaultProps = {
    size: 14,
    bubbleColor: '#E14C46',
    textColor: '#FFF',
    fontSize: 12,
  }

  render() {
    let width,
      value = this.props.value
    if (
      (this.props.value && this.props.value.toString().indexOf('-') != -1) ||
      this.props.value >= 10
    ) {
      width = this.props.size * 1.7
      if (this.props.value >= 100) {
        value = 99 + '+'
        width = this.props.size * 1.9
      }
    } else {
      width = this.props.size
    }
    if (value != 0) {
      return (
        <View
          style={[
            this.props.style,
            {
              width: width,
              height: this.props.size,
              borderRadius: this.props.size,
              backgroundColor: this.props.bubbleColor,
              alignItems: 'center',
              flexDirection: 'column',
              justifyContent: 'center',
            },
          ]}
        >
          <Text
            style={{
              color: this.props.textColor,
              fontSize: this.props.fontSize,
            }}
          >
            {value}
          </Text>
        </View>
      )
    } else {
      return null
    }
  }
}