1import * as Contacts from 'expo-contacts';
2import * as React from 'react';
3import { FlatList, FlatListProps, ListRenderItem, StyleProp, ViewStyle } from 'react-native';
4
5import ContactsListItem from './ContactsListItem';
6
7type Props = {
8  onPressItem: (id: string) => void;
9  style?: StyleProp<ViewStyle>;
10  data: Contacts.Contact[];
11} & Pick<
12  FlatListProps<Contacts.Contact>,
13  Exclude<keyof FlatListProps<Contacts.Contact>, 'renderItem' | 'keyExtractor' | 'data'>
14>;
15
16export default function ContactsList({ data, style, onPressItem, ...props }: Props) {
17  const renderItem: ListRenderItem<Contacts.Contact> = React.useCallback(
18    ({ item }) => (
19      <ContactsListItem
20        key={item.id}
21        contactId={item.id!}
22        {...item}
23        onPress={(id: string) => onPressItem?.(id)}
24      />
25    ),
26    [onPressItem]
27  );
28
29  return (
30    <FlatList<Contacts.Contact>
31      {...props}
32      style={[{ flex: 1 }, style]}
33      keyExtractor={(item) => item.id!}
34      data={data}
35      renderItem={renderItem}
36    />
37  );
38}
39