Activity.js

import React from 'react';
import { View, Image, Text, StyleSheet, TouchableOpacity, } from 'react-native';
import ProfilePicture from 'components/ProfilePicture';
import ActivityDescription from './ActivityDescription';

const Activity = (props) => {

  return <View style={styles.container}>
    <ProfilePicture item={props.item} size={55} />
    <ActivityDescription item={props.item} />
    <TouchableOpacity>
      <Image source={{ uri: props.item.mentionedImage }} style={styles.mentionedImage} />
    </TouchableOpacity>
  </View>
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 20,
    justifyContent: 'space-between'
  },
  mentionedImage: {
    width: 48,
    height: 48
  },
});

export default Activity;

ActivityDescription.js

import React from 'react';
import { View, Text, StyleSheet, } from 'react-native';
import colors from 'res/colors';

const ActivityDescription = (props) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        <Text style={styles.name}>{props.item.key}</Text>
        {
          props.item.activityType === 'like'
            ? ' yorumunu beğendi: '
            : ' bir yorumda senden bahsetti: '
        }
        {props.item.lastMsg}
        <Text style={styles.date}> · {props.item.sendTime}</Text>
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, marginStart: 20, marginEnd: 20, },
  text: { color: colors.textFaded1, fontWeight: 'normal' },
  name: { fontWeight: 'bold' },
  date: { color: colors.textFaded2, },
});

export default ActivityDescription;