1import Ionicons from '@expo/vector-icons/build/Ionicons';
2import * as React from 'react';
3import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
4
5import Colors from '../../constants/Colors';
6
7export default function ContactsListItem(props: {
8  contactId: string;
9  name: string;
10  subtitle?: string;
11  isMe?: boolean;
12  onPress: (contactId: string) => void;
13}) {
14  const onPress = () => {
15    props.onPress && props.onPress(props.contactId);
16  };
17
18  const { name, subtitle, isMe } = props;
19  return (
20    <TouchableHighlight underlayColor={Colors.listItemTouchableHighlight} onPress={onPress}>
21      <View style={styles.container}>
22        <View>
23          <Text style={styles.title}>{name}</Text>
24          {subtitle && <Text style={styles.link}>{subtitle}</Text>}
25        </View>
26        {isMe && <Text style={styles.subtitle}>me</Text>}
27        <Ionicons size={24} color={Colors.tabIconDefault} name="ios-arrow-forward" />
28      </View>
29    </TouchableHighlight>
30  );
31}
32
33const styles = StyleSheet.create({
34  container: {
35    padding: 16,
36    flexDirection: 'row',
37    justifyContent: 'space-between',
38    alignItems: 'center',
39  },
40  title: {
41    fontWeight: 'bold',
42  },
43  link: {
44    color: Colors.tintColor,
45  },
46  subtitle: {
47    opacity: 0.8,
48  },
49});
50