/
RestaurantDetails.js
91 lines (78 loc) · 2.25 KB
/
RestaurantDetails.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {
ScrollView,
Icon,
Row,
Subtitle,
Text,
Title,
View,
Image,
Divider,
Tile,
Screen,
} from '@shoutem/ui';
import {
NavigationBar,
} from '@shoutem/ui/navigation';
export default class RestaurantDetails extends Component {
static propTypes = {
restaurant: PropTypes.object,
};
render() {
const { restaurant } = this.props;
return (
<Screen styleName="paper full-screen">
<NavigationBar
title={restaurant.name}
styleName="clear hide-title"
animationName="solidify"
/>
<ScrollView>
<Image
styleName="large-portrait hero"
animationName="hero"
source={{ uri: restaurant.image && restaurant.image.url }}
key={restaurant.name}
>
<Tile animationName="hero">
<Title>{restaurant.name}</Title>
<Subtitle>{restaurant.address}</Subtitle>
</Tile>
</Image>
<Screen styleName="paper">
<Text styleName="md-gutter multiline">{restaurant.description}</Text>
<Divider styleName="line" />
<Row>
<Icon name="laptop" />
<View styleName="vertical">
<Subtitle>Visit webpage</Subtitle>
<Text numberOfLines={1}>{restaurant.url}</Text>
</View>
<Icon styleName="disclosure" name="right-arrow" />
</Row>
<Divider styleName="line" />
<Row>
<Icon name="pin" />
<View styleName="vertical">
<Subtitle>Address</Subtitle>
<Text numberOfLines={1}>{restaurant.address}</Text>
</View>
<Icon styleName="disclosure" name="right-arrow" />
</Row>
<Divider styleName="line" />
<Row>
<Icon name="email" />
<View styleName="vertical">
<Subtitle>Email</Subtitle>
<Text numberOfLines={1}>{restaurant.mail}</Text>
</View>
</Row>
<Divider styleName="line" />
</Screen>
</ScrollView>
</Screen>
);
}
}