-- CODE language-jsx --
import React from 'react';
import { Divider, ScreenContainer, withTheme } from '@draftbit/ui';
import {
FlatList,
Image,
ScrollView,
StyleSheet,
Text,
View,
} from 'react-native';
import { Fetch } from 'react-request';
const MyTeamScreen = props => {
const { theme } = props;
return (
<ScreenContainer
style={styles.ScreenContainerEf}
scrollable={false}
hasSafeArea={true}
>
<ScrollView
showsHorizontalScrollIndicator={true}
showsVerticalScrollIndicator={true}
bounces={true}
horizontal={false}
>
<Text
style={StyleSheet.flatten([
styles.TextCw,
theme.typography.body1,
{ color: theme.colors.strong },
])}
numberOfLines={2}
>
Employees based out of Chicago.
</Text>
<Divider
style={styles.Divider_2b}
color={theme.colors.light}
height={1}
/>
<Fetch
url={`https://example-data.draftbit.com/people?_limit=10`}
headers={{
Accept: 'application/json',
'Content-Type': 'application/json',
}}
>
{({ loading, error, data, refetch }) => {
if (loading) {
return null;
}
if (error) {
return null;
}
if (!data) {
return null;
}
return (
<FlatList
renderItem={({ item }) => (
<View
style={styles.Viewm6}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<View
style={styles.ViewiD}
hitSlop={{}}
importantForAccessibility="auto"
pointerEvents="auto"
accessible={true}
>
<View
style={StyleSheet.flatten([
styles.Viewpd,
{
borderRadius: theme.borderRadius.global,
backgroundColor: theme.colors.strongInverse,
borderColor: theme.colors.divider,
},
])}
>
<Image
style={StyleSheet.flatten([
styles.Imageux,
{ borderRadius: theme.borderRadius.global },
])}
source={{ uri: item['avatar'] }}
resizeMode="cover"
/>
<View
style={styles.ViewJk}
hitSlop={{}}
pointerEvents="auto"
accessible={true}
>
<Text
style={StyleSheet.flatten([
styles.TextgB,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
allowFontScaling={true}
>
{item && item['first_name']}
</Text>
<Text
style={StyleSheet.flatten([
styles.TextqU,
theme.typography.caption,
{ color: theme.colors.light },
])}
allowFontScaling={true}
>
{item && item['username']}
</Text>
</View>
</View>
</View>
</View>
)}
contentContainerStyle={styles.FlatListRn}
numColumns={3}
data={data}
horizontal={false}
/>
);
}}
</Fetch>
</ScrollView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
ScreenContainerEf: {
justifyContent: 'space-between',
},
Imageux: {
width: 60,
height: 60,
alignSelf: 'center',
opacity: 0.85,
},
TextgB: {
textAlign: 'center',
},
ViewiD: {
marginTop: 20,
marginBottom: 10,
paddingLeft: 5,
paddingRight: 5,
height: 150,
marginLeft: 10,
marginRight: 10,
alignItems: 'center',
width: 110,
},
TextCw: {
marginTop: 20,
marginLeft: 20,
marginRight: 20,
textAlign: 'center',
textTransform: 'none',
},
Viewpd: {
height: 150,
justifyContent: 'space-evenly',
borderTopWidth: 1,
borderLeftWidth: 1,
borderBottomWidth: 1,
borderRightWidth: 1,
width: 110,
},
Divider_2b: {
height: 1,
marginTop: 14,
marginLeft: 32,
marginRight: 32,
},
TextqU: {
textAlign: 'center',
},
ViewJk: {
alignSelf: 'center',
alignContent: 'center',
},
FlatListRn: {
alignSelf: 'center',
alignItems: 'flex-start',
},
Viewm6: {
flexDirection: 'row',
flexGrow: 1,
justifyContent: 'space-around',
},
});
export default withTheme(MyTeamScreen);