DialogItem.js

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

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

export default class DialogsItem extends React.Component {

  parseDate(timestamp) { 
    let oneMinute = (1000 * 60);
    let oneHour = oneMinute * 60;
    let oneDay = oneHour * 24;
    let oneWeek = oneDay * 7;

    let messageDate = new Date(timestamp); 
    let currentTimestamp = +new Date(); 
    let diffTime = new Date(currentTimestamp - timestamp);
    let template; 

    if(currentTimestamp - oneHour > timestamp) { 
      template = `${messageDate.getHours()}:${messageDate.getMinutes()}`; 
    } else if(currentTimestamp - oneMinute > timestamp && currentTimestamp - oneHour < timestamp) {
      template = `${diffTime.getMinutes()}мин`; 
    } else if(currentTimestamp - oneDay > timestamp) {
      template = `${messageDate.getDate()}.${messageDate.getMonth()}.${messageDate.getFullYear()}`; 
    } else { 
      template = `${diffTime.getSeconds()}сек`;
    } 

    return template; 
  };

  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}>
                · {this.parseDate(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: 18,
  },
  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,
  }
});