-
Notifications
You must be signed in to change notification settings - Fork 692
/
ContactsListScreen.js
61 lines (52 loc) · 1.56 KB
/
ContactsListScreen.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, {Component} from 'react';
import {StyleSheet, Alert, FlatList} from 'react-native';
import {AnimatableManager, ThemeManager, ListItem, Text, Avatar, AvatarHelper} from 'react-native-ui-lib'; //eslint-disable-line
import conversations from '../../data/conversations';
export default class ContactsListScreen extends Component {
constructor(props) {
super(props);
this.state = {
onEdit: false,
updating: false,
};
}
keyExtractor = item => item.name;
renderRow(row, id) {
const initials = AvatarHelper.getInitials(row.name);
const animationProps = AnimatableManager.getEntranceByIndex(id);
return (
<ListItem
key={id}
onPress={() => Alert.alert(`pressed on contact #${id + 1}`)}
{...animationProps}
>
<ListItem.Part left>
<Avatar
imageSource={row.thumbnail ? {uri: row.thumbnail} : null}
label={initials}
isOnline={Number(id) % 3 === 0}
containerStyle={{marginHorizontal: 18}}
/>
</ListItem.Part>
<ListItem.Part middle containerStyle={styles.border}>
<Text text70>{row.name}</Text>
</ListItem.Part>
</ListItem>
);
}
render() {
return (
<FlatList
data={conversations}
renderItem={({item, index}) => this.renderRow(item, index)}
keyExtractor={this.keyExtractor}
/>
);
}
}
const styles = StyleSheet.create({
border: {
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: ThemeManager.dividerColor,
},
});