-- 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);