-- CODE language-jsx --
import React from 'react';
import { Button, Container, Icon, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import { ImageBackground, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Fetch } from 'react-request';
   const REPLACE_SCREEN_NAME = props => {
     const { theme } = props
     return (
     <ScreenContainer  scrollable={false} hasSafeArea={true}>
     <ScrollView  contentContainerStyle={styles.ScrollViewcC}bounces={true} showsVerticalScrollIndicator={true} showsHorizontalScrollIndicator={true}>
       <Fetch
   url={`https://example-data.draftbit.com/authors/${encodeURIComponent(14)}`}
   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 (
     <View  style={styles.ViewEe}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <View  style={styles.Viewei}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <ImageBackground  style={styles.ImageBackgroundpT}resizeMode=""cover"" source={{ uri: data[""imgUrl""] }}>
     <Container  style={StyleSheet.flatten([styles.ContainerGb, { backgroundColor: theme.colors.background, borderRadius: theme.borderRadius.global }])}useThemeGutterPadding={true} elevationType=""2"">
     <Text  style={StyleSheet.flatten([theme.typography.headline4, { color: theme.colors.strong }])}>
       {data && data[""person""]}
     </Text>
     <View  style={styles.View_9m}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <View  style={styles.View_8z}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([styles.Textlh, theme.typography.subtitle2, { color: theme.colors.medium }])}>
       {data && data[""professions""]}
     </Text>
     <View  style={styles.ViewG7}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([styles.Textgp, theme.typography.body2, { color: theme.colors.medium }])}>
       Born:
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.body2, { color: theme.colors.medium }])}>
       {data && data[""dateOfBirth""]}
     </Text>
     </View>
     </View>
     <Touchable  style={styles.TouchableHw}>
     <View  style={StyleSheet.flatten([styles.Viewwn, { backgroundColor: theme.colors.background, borderRadius: theme.borderRadius.global, borderColor: theme.colors.divider }])}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <View  style={styles.Viewmb}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
       <Icon  style={styles.IconI7}size={14} color={theme.colors.strong} name=""Zocial/wikipedia"" />
     <View  style={styles.ViewyO}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([theme.typography.body2, { color: theme.colors.strong }])}>
       {data && data[""sourceUrl""]}
     </Text>
     </View>
     </View>
     <View  style={styles.ViewBZ}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
       <Icon  size={18} color={theme.colors.light} name=""FontAwesome/angle-right"" />
     </View>
     </View>
     </Touchable>
     </View>
     </Container>
     </ImageBackground>
     </View>
     <View  style={styles.View_59}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([styles.TextAf, theme.typography.subtitle2, { color: theme.colors.light }])}>
       Bio
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.body1, { color: theme.colors.strong }])}>
       {data && data[""description""]}
     </Text>
     </View>
     <View  style={styles.Viewqt}accessible={true} importantForAccessibility=""auto"" hitSlop={{}} pointerEvents=""auto"">
     <Button  style={StyleSheet.flatten([styles.ButtonMV, { borderRadius: theme.borderRadius.global }])}type=""solid"">
       Follow
     </Button>
     </View>
     </View>
   )
 }}
</Fetch>
     </ScrollView>
     </ScreenContainer>
     )
   }
const styles = StyleSheet.create({ ScrollViewcC: {
alignContent: ""stretch"" }, ViewEe: {
alignContent: ""stretch"" }, Viewei: {
alignContent: ""stretch"", height: 580, marginBottom: 24 }, ImageBackgroundpT: {
height: 580, justifyContent: ""flex-end"", paddingLeft: 24, paddingRight: 24, paddingBottom: 32, paddingTop: 24, alignSelf: ""stretch"", position: ""absolute"", right: 0, top: 0, bottom: 0, left: 0 }, ContainerGb: {
paddingTop: 24, paddingLeft: 24, paddingBottom: 24, paddingRight: 24, alignSelf: ""center"" }, View_8z: {
paddingTop: 4 }, Viewwn: {
borderTopWidth: 1, borderBottomWidth: 1, borderLeftWidth: 1, borderRightWidth: 1, paddingBottom: 12, paddingLeft: 12, paddingTop: 12, paddingRight: 12, flexDirection: ""row"", alignItems: ""center"", justifyContent: ""space-between"", alignContent: ""center"" }, IconI7: {
flexDirection: ""row"", alignSelf: ""center"", alignItems: ""center"", marginRight: 4 }, Viewmb: {
flexDirection: ""row"", alignItems: ""center"", width: ""75%"", alignContent: ""center"", minHeight: 24, maxHeight: 24, alignSelf: ""center"" }, ButtonMV: {
height: 54, justifyContent: ""center"", alignItems: ""center"" }, TextAf: {
marginBottom: 4 }, Textlh: {
marginBottom: 4 }, Textgp: {
marginRight: 4 }, View_59: {
paddingLeft: 36, paddingRight: 36, paddingTop: 24, paddingBottom: 24 }, View_9m: {
marginTop: 8 }, ViewyO: {
width: ""100%"", paddingRight: 10, marginLeft: 8, overflow: ""hidden"", flexWrap: ""wrap"", minHeight: 24, maxHeight: 24, flexDirection: ""row"", alignItems: ""center"", alignSelf: ""center"" }, ViewBZ: {
justifyContent: ""center"", alignItems: ""center"", alignSelf: ""center"", flexDirection: ""row"" }, ViewG7: {
flexDirection: ""row"", alignItems: ""center"", flexWrap: ""wrap"" }, TouchableHw: {
marginTop: 14, alignSelf: ""stretch"" }, Viewqt: {
paddingLeft: 36, paddingBottom: 36, paddingTop: 36, paddingRight: 36 } })
export default withTheme(REPLACE_SCREEN_NAME);