import React from 'react';
import { StatusBar, StyleSheet, View, ScrollView, Text } from 'react-native';
import {
withTheme,
ScreenContainer,
Container,
Carousel,
IconButton,
Icon,
RowHeadlineImageIcon,
Divider,
} from '@draftbit/ui';
import Images from '../config/Images.js';
class MyTripsScreen extends React.Component {
componentDidMount() {
StatusBar.setBarStyle('light-content');
}
render() {
const { theme } = this.props;
return (
<ScreenContainer>
<ScrollView style={styles.ScrollView_nr}>
<View>
<Carousel
style={styles.Carousel_n4k}
images={[Images.Listing1, Images.Listing2]}
dotColor={theme.colors.light}
resizeMode="cover"
/>
<IconButton
style={styles.IconButton_nqa}
icon="MaterialIcons/arrow-back"
size={32}
color={theme.colors.strongInverse}
onPress={() => {
this.props.navigation.goBack();
}}
/>
</View>
<Container useThemeGutterPadding={true}>
<View style={styles.View_nma}>
<Icon
style={styles.Icon_nd0}
name="FontAwesome/map-marker"
size={24}
color={theme.colors.light}
/>
<Text
style={[
styles.Text_nkl,
{
color: theme.colors.light,
},
]}>
San Diego
</Text>
</View>
<Text
style={[
styles.Text_nlz,
theme.typography.headline4,
{
color: theme.colors.strong,
},
]}>
Beautiful West Coast Summer Villa with Pool
</Text>
<Text
style={[
styles.Text_nds,
theme.typography.body1,
{
color: theme.colors.light,
},
]}>
You will have a private pool, two king beds, kitchenette and
entire property, both houses. In house wifi, air conditioning.
</Text>
</Container>
<Container
style={styles.Container_nr1}
backgroundColor={theme.colors.surface}>
<RowHeadlineImageIcon
style={styles.RowHeadlineImageIcon_nqw}
icon="MaterialCommunityIcons/message-text"
image="https://apps-draftbit-com.s3.amazonaws.com/OPBeh6ac/assets/93ec6af4-f74e-4c30-bc11-6c1d9fbe934c"
title="Heather Walker"
subtitle="San Diego, CA"
/>
</Container>
<Container style={styles.Container_nml} useThemeGutterPadding={true}>
<Text
style={[
styles.Text_ny2,
theme.typography.headline5,
{
color: theme.colors.strong,
},
]}>
Details
</Text>
<View style={styles.View_n65}>
<Text
style={[
styles.Text_n3o,
theme.typography.body1,
{
color: theme.colors.medium,
},
]}>
Sq. Ft
</Text>
<Text
style={[
styles.Text_nts,
{
color: theme.colors.strong,
},
]}>
2,376
</Text>
</View>
<Divider style={styles.Divider_nti} color={theme.colors.divider} />
<View style={styles.View_n8q}>
<Text
style={[
styles.Text_naw,
theme.typography.body1,
{
color: theme.colors.medium,
},
]}>
Amenities
</Text>
<Text
style={[
styles.Text_niu,
{
color: theme.colors.strong,
},
]}>
TV, Washer/Dryer, Wifi
</Text>
</View>
<Divider style={styles.Divider_njk} color={theme.colors.divider} />
<View style={styles.View_n8q}>
<Text
style={[
styles.Text_naw,
theme.typography.body1,
{
color: theme.colors.medium,
},
]}>
Rooms
</Text>
<Text
style={[
styles.Text_niu,
{
color: theme.colors.strong,
},
]}>
3 bed, 2 bath
</Text>
</View>
</Container>
</ScrollView>
<Container
style={styles.Container_nxn}
elevation={1}
backgroundColor={theme.colors.surface}
useThemeGutterPadding={true}>
<View style={styles.View_nsv}>
<View style={styles.View_ng7}>
<Text
style={[
styles.Text_nv5,
theme.typography.headline5,
{
color: theme.colors.strong,
},
]}>
$75
<Text
style={[
styles.Text_n1o,
theme.typography.body1,
{
color: theme.colors.medium,
},
]}>
/night
</Text>
</Text>
</View>
<View style={styles.View_nv5}>
<Icon
style={styles.Icon_n9u}
name="FontAwesome/star"
size={16}
color={theme.colors.primary}
/>
<Icon
style={styles.Icon_n9u}
name="FontAwesome/star"
size={16}
color={theme.colors.primary}
/>
<Icon
style={styles.Icon_n9u}
name="FontAwesome/star"
size={16}
color={theme.colors.primary}
/>
<Icon
style={styles.Icon_n9u}
name="FontAwesome/star"
size={16}
color={theme.colors.light}
/>
<Icon
style={styles.Icon_n9u}
name="FontAwesome/star"
size={16}
color={theme.colors.light}
/>
</View>
</View>
<Container
style={[
styles.Container_n4a,
{ borderRadius: theme.borderRadius.global },
]}
elevation={2}
backgroundColor={theme.colors.primary}
useThemeGutterPadding={true}>
<Text
style={[
styles.Text_npg,
theme.typography.button,
{
color: theme.colors.surface,
},
]}>
Book
</Text>
</Container>
</Container>
</ScreenContainer>
);
}
}
const styles = StyleSheet.create({
Carousel_n4k: {
width: '100%',
height: 200,
},
Container_n4a: {
width: 130,
paddingVertical: 16,
},
View_n65: {
justifyContent: 'space-between',
flexDirection: 'row',
marginVertical: 15,
},
View_n8q: {
justifyContent: 'space-between',
flexDirection: 'row',
marginVertical: 15,
},
View_nma: {
alignItems: 'center',
flexDirection: 'row',
marginTop: 15,
marginBottom: 10,
},
Container_nml: {
marginTop: 20,
},
Container_nr1: {
marginTop: 20,
},
Container_nxn: {
justifyContent: 'space-between',
alignItems: 'center',
alignContent: 'flex-start',
flexDirection: 'row',
padding: 16,
},
Divider_njk: {
width: '100%',
},
Divider_nti: {
width: '100%',
},
IconButton_nqa: {
width: 24,
height: 24,
left: 20,
top: 20,
position: 'absolute',
},
Icon_n9u: {
width: 24,
height: 24,
},
Icon_nd0: {
width: 24,
height: 24,
marginRight: 10,
},
ScrollView_nr: {
paddingBottom: 50,
},
Text_npg: {
textAlign: 'center',
},
View_ng7: {
flexDirection: 'row',
marginBottom: 4,
},
View_nsv: {
marginRight: 24,
},
View_nv5: {
flexDirection: 'row',
},
});
export default withTheme(MyTripsScreen);
