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
|
import React, {Fragment} from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';
import {ProfilePreviewType} from '../../types';
import {normalize} from '../../utils';
import ExploreSectionUser from './ExploreSectionUser';
/**
* Search Screen for user recommendations and a search
* tool to allow user to find other users
*/
interface ExploreSectionProps {
title: string;
users: ProfilePreviewType[];
}
const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
return users && users.length !== 0 ? (
<View style={styles.container}>
<Text style={styles.header}>{title}</Text>
<FlatList
data={users}
ListHeaderComponent={<View style={styles.padding} />}
renderItem={({item: user}: {item: ProfilePreviewType}) => (
<ExploreSectionUser
key={user.id}
user={user}
externalStyles={StyleSheet.create({
container: styles.user,
})}
/>
)}
showsHorizontalScrollIndicator={false}
horizontal
/>
</View>
) : (
<Fragment />
);
};
const styles = StyleSheet.create({
container: {
marginVertical: '5%',
},
header: {
fontWeight: '600',
fontSize: normalize(18),
color: '#fff',
marginLeft: '5%',
marginBottom: '5%',
},
user: {
marginHorizontal: 5,
},
padding: {
width: 10,
},
});
export default ExploreSection;
|
