Author Bio [Data-Enabled]
A profile screen fed by example-data.drafbit.com/authors.
-- 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);
