DialogItem.js

import React from 'react';
import { 
  ScrollView, 
  StyleSheet, 
  AsyncStorage,
  View,
  Text,
  TouchableOpacity,
  Image,
  TouchableHighlight
} from 'react-native';

import { Viewport } from '../../utils';

function normalizeDate(date) {
  date = new Date(date);

  let addZero = (n) => n.toString().length < 2 ? '0' + n : n;

  let year = date.getFullYear();
  let shortYear = year - 2000;
  let month = addZero(date.getMonth());
  let day = addZero(date.getDate());
  let minutes = addZero(date.getMinutes());
  let hours = addZero(date.getHours());
  let seconds = date.getSeconds();

  return { year, shortYear, hours, minutes, seconds, day, month };
}

function parseDialogTime(timestamp) {
  const oneMinute = (1000 * 60);
  const oneHour = oneMinute * 60;
  const oneDay = oneHour * 24;
  const oneWeek = oneDay * 7;

  const currentTimestamp = +new Date(); 
  const hourGap = (currentTimestamp - oneHour);
  const minuteGap = (currentTimestamp - oneMinute);
  const dayGap = (currentTimestamp - oneDay);
  const weekGap = (currentTimestamp - oneWeek);
  
  const isWithinMinute = (minuteGap < timestamp);
  const isWithinHour = (minuteGap > timestamp && hourGap < timestamp);
  const isWithinDay = (minuteGap > timestamp && dayGap < timestamp);
  const isWithinWeek = (dayGap > timestamp && weekGap < timestamp);

  let date = normalizeDate(timestamp); 
  let diffDate = new Date(currentTimestamp - timestamp);

  if(isWithinMinute) {
    return diffDate.getSeconds() + 'сек';
  } else if(isWithinHour) {
    return diffDate.getMinutes() + 'мин';
  } else if(isWithinDay) {
    return date.hours + ':' + date.minutes;
  } else if(isWithinWeek) {
    var days = ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];
    return days[new Date(timestamp).getDay()];
  } else {
    return date.day + '.' + date.month + '.' + date.shortYear;
  }
}

export default class DialogsItem extends React.Component {

  render() {
    const { peer, message, onPress } = this.props;

    const isUnread = !message.unread ? styles.messageUnread : {};

    return (
      <TouchableOpacity
        onPress={onPress} 
        activeOpacity={0.6}
        style={styles.container}
      > 
        <View style={styles.dialogWrapper}>
          <View style={styles.dialogLeft}>
            <Image 
              style={styles.picture}
              source={{ uri: peer.picture }}
            />
          </View>
          <View style={styles.dialogRight}>
            <Text style={styles.name}>
              {peer.name}
            </Text>
            <View style={styles.messageWrapper}>
              <Text 
                style={[styles.message, isUnread]}
                ellipsizeMode="tail"
                numberOfLines={1}
              >
                {message.text}
              </Text>
              <Text style={styles.dateText}>
                · {parseDialogTime(message.date)}
              </Text>
            </View>
          </View>
        </View>

        {!message.unread && 
          <View style={styles.unreadDotWrapper}>
            <View style={styles.unreadDot} />
          </View>
        }
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingHorizontal: 16,
  },
  dialogItem: {
    
  },
  dialogWrapper: {
    marginVertical: 10,
    flexDirection: 'row',
    flex: 1
  },
  dialogLeft: {
    marginRight: 15,
    width: 60, 
    height: 60,
    borderRadius: 60,
    overflow: 'hidden'
  },
  dialogRight: {
    paddingVertical: 7,
  },
  name: {
    fontSize: 17,
    fontWeight: '500'
  },
  messageWrapper: {
    flexDirection: 'row',
  },
  message: {
    paddingTop: 3,
    fontSize: 16,
    color: '#999',
    maxWidth: Viewport.width - 93 - 100
  },
  dateText: {
    padding: 5,
    fontSize: 15,
    color: '#999',
  },
  messageUnread: {
    fontWeight: '500',
    color: '#000' 
  },
  picture: {
    width: 60, 
    height: 60,
  },
  unreadDotWrapper: {
    alignItems: 'flex-end',
    justifyContent: 'center',
  },
  unreadDot: {
    alignSelf: 'flex-end',
    width: 7,
    height: 7,
    backgroundColor: '#0099fe',
    borderRadius: 7,
  }
});