Timer.js

import React, { PureComponent } from 'react'
import { Text, View, StyleSheet } from 'react-native'
import moment from 'moment'
import { LIGHT_GRAY, WHITE, BLACK } from '../../styles/colors'

class Timer extends PureComponent {
  state = {
    remainingTime: 0,
    isTimerVisible: true
  }

  componentDidMount() {
    const limit = 172800000
    const matchDuration = Number(moment().format('x')) - this.props.created_at
    const checkDuration = matchDuration > limit ? 0 : matchDuration
    const endTime = new Date().getTime() - checkDuration + limit
    this.interval = setInterval(() => {
      const remaining = endTime - new Date()
      if (remaining <= 1000) {
        this.setState({ remainingTime: 0, isTimerVisible: false })
        this.stop()
        return
      }
      this.setState({ remainingTime: remaining })
    }, 1)
  }

  componentWillUnmount() {
    if (this.interval) this.stop()
  }

  stop = () => clearInterval(this.interval)

  formatTime = remainingTime => {
    const dur = moment.duration(remainingTime, 'millisecond')
    const { floor } = Math
    const hours = floor(dur.asHours())
    const mins = floor(dur.asMinutes()) - hours * 60
    const sec = floor(dur.asSeconds()) - hours * 60 * 60 - mins * 60
    return `${hours}:${mins}:${sec > 9 ? sec : `0${sec}`}`
  }

  render() {
    const {
      props: { upliner },
      state: { isTimerVisible, remainingTime }
    } = this
    const { container, h1, text, sub, timerStyle } = styles
    const arr = this.formatTime(remainingTime).split(':')
    const isUserHaveUpliner = !!upliner

    return (
      <View style={container}>
        {!!isTimerVisible && !isUserHaveUpliner && (
          <View style={timerStyle}>
            <Text style={h1}>The referral program is valid until :</Text>
            <View style={sub}>
              <Text style={text}>{arr[0]}</Text>
            </View>
            <View style={sub}>
              <Text style={text}>{arr[1]}</Text>
            </View>
            <View style={sub}>
              <Text style={text}>{arr[2]}</Text>
            </View>
          </View>
        )}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 10
  },
  timerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    height: 36,
    borderBottomWidth: 1,
    backgroundColor: WHITE,
    borderColor: LIGHT_GRAY
  },
  sub: {
    width: 27,
    height: 19,
    borderRadius: 3.3,
    backgroundColor: BLACK,
    marginRight: 5,
    justifyContent: 'center',
    alignItems: 'center'
  },
  h1: {
    fontSize: 12,
    textAlign: 'left',
    paddingTop: 2,
    marginRight: 10
  },
  text: {
    paddingTop: 0,
    fontSize: 13,
    width: 27,
    textAlign: 'center',
    color: WHITE
  }
})


export default Timer