react native flatlist

import React from 'react';
import styled from 'styled-components/native';
import {View, FlatList, Text} from 'react-native';
import Moment from 'react-moment';

import EmptyMailBox from '../../components/atoms/EmptyMailBox';

const changeTime = time => {
  return time
    .replace('a', '1')
    .replace(' ', '')
    .replace('d1ys', 'D')
    .replace('years', 'y')
    .replace('year', 'y')
    .replace('day', 'D')
    .replace('days', 'D')
    .replace('hours', 'h')
    .replace('hour', 'h')
    .replace('seconds', 's')
    .replace('second', 's');
};

const MessagesForm = ({Data, navigation}) => {
  const renderItem = ({item}) => (
    <MessageBox>
      <Touch onPress={() => navigation.push('MessageDetail', item)}>
        <TitleBox>
          <Date isNew={item.isNewMessage}>{item.name}</Date>
          <New>{item.isNewMessage ? 'New!' : null}</New>
        </TitleBox>
        <ContentBox>
          <Message numberOfLines={1}>{item.content}</Message>
          <Moment element={Text} fromNow filter={time => changeTime(time)} ago>
            {item.time}
          </Moment>
        </ContentBox>
      </Touch>
      <Line />
    </MessageBox>
  );

  return (
    <>
      {Data ? (
        <View style={{marginTop: 20}}>
          <FlatList
            data={Data}
            keyExtractor={item => item.id}
            renderItem={renderItem}
          />
        </View>
      ) : (
        <EmptyMailBox />
      )}
    </>
  );
};

export default MessagesForm;

const MessageBox = styled.View`
  padding: 0 23px;
`;

const Touch = styled.TouchableOpacity``;

const TitleBox = styled.View`
  margin-top: 10px;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
`;

const Date = styled.Text`
  font-weight: ${props => (props.isNew ? 'bold' : 'normal')};
  font-size: 20px;
`;

const New = styled.Text`
  font-size: 20px;
  right: 10px;
  color: #81bb48;
`;

const ContentBox = styled.View`
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 16px;
`;

const Message = styled.Text`
  max-width: 85%;
  font-size: 18px;
  color: #9b9b9b;
`;

const Line = styled.View`
  width: 340px;
  height: 1px;
  border: solid 0.5px #d0d0d0;
`;