-- CODE language-jsx --
import React from 'react';
import { Icon, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import {
FlatList,
ImageBackground,
ScrollView,
StyleSheet,
Text,
View,
} from 'react-native';
import { Fetch } from 'react-request';
const AuthorsProfileScreen = props => {
const { theme } = props;
return (
<ScreenContainer hasSafeArea={true} scrollable={false}>
<View
style={styles.Viewfd}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<Text
style={StyleSheet.flatten([
styles.Text_2S,
theme.typography.headline4,
{ color: theme.colors.strong },
])}
>
List of Famous Authors
</Text>
</View>
<ScrollView
contentContainerStyle={styles.ScrollViewoi}
showsHorizontalScrollIndicator={true}
showsVerticalScrollIndicator={true}
bounces={true}
>
<Fetch
url={`https://example-data.draftbit.com/authors?_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={StyleSheet.flatten([
styles.Viewjf,
{
backgroundColor: theme.colors.surface,
borderRadius: theme.borderRadius.global,
},
])}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<View
style={StyleSheet.flatten([
styles.ViewTJ,
{ borderRadius: theme.borderRadius.button },
])}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<ImageBackground
style={styles.ImageBackgroundwJ}
resizeMode="cover"
source={{ uri: item['imgUrl'] }}
/>
</View>
<View
style={styles.View_6N}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<View
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<Text
style={StyleSheet.flatten([
styles.TexttW,
theme.typography.custom51,
])}
adjustsFontSizeToFit={false}
numberOfLines={2}
>
{item && item['person']}
</Text>
<Text style={{ color: theme.colors.strong }}>
{item && item['description']}
</Text>
</View>
<Touchable style={styles.TouchableoS}>
<View
style={styles.ViewTh}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<Icon
color={theme.colors.strong}
size={24}
name="FontAwesome/user-circle"
/>
<Icon
color={theme.colors.strong}
size={24}
name="Entypo/bookmarks"
/>
</View>
</Touchable>
</View>
</View>
)}
numColumns={1}
data={data}
/>
);
}}
</Fetch>
</ScrollView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
Viewjf: {
flexDirection: 'row',
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 8,
paddingRight: 8,
marginTop: 16,
},
Viewfd: {
marginTop: 20,
marginBottom: 20,
marginLeft: 20,
marginRight: 20,
},
ViewTJ: {
width: 140,
height: 140,
overflow: 'hidden',
},
ViewTh: {
flexDirection: 'row',
justifyContent: 'space-between',
width: 60,
},
TexttW: {
width: '100%',
textAlign: 'left',
marginBottom: 4,
},
ImageBackgroundwJ: {
width: 140,
height: 140,
},
Text_2S: {
textAlign: 'center',
},
ScrollViewoi: {
marginLeft: 16,
marginRight: 16,
},
View_6N: {
alignSelf: 'flex-start',
justifyContent: 'space-between',
flexGrow: 1,
flexShrink: 1,
marginLeft: 16,
},
TouchableoS: {
paddingTop: 8,
paddingRight: 16,
paddingBottom: 8,
flexDirection: 'row',
justifyContent: 'space-between',
},
});
export default withTheme(AuthorsProfileScreen);