Commit f53de0a3 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Make the maps image clickable and let it open directions

parent c2910c39
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FlatList, Alert, Image, ScrollView, Text, View, RefreshControl, Button } from 'react-native'; import { FlatList, Alert, Image, ScrollView, Text, View, RefreshControl, Button, TouchableHighlight, Platform, Linking } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Moment from 'moment'; import Moment from 'moment';
import 'moment/locale/nl'; import 'moment/locale/nl';
...@@ -267,11 +267,16 @@ class Event extends Component { ...@@ -267,11 +267,16 @@ class Event extends Component {
onRefresh={this.handleRefresh} onRefresh={this.handleRefresh}
/> />
)} )}
>
<TouchableHighlight
onPress={() => this.props.openMaps(this.props.data.map_location)}
style={styles.locationImageWrapper}
> >
<Image <Image
style={styles.locationImage} style={styles.locationImage}
source={{ uri: `https://maps.googleapis.com/maps/api/staticmap?center=${this.props.data.map_location}&zoom=13&size=450x250&markers=${this.props.data.map_location}` }} source={{ uri: `https://maps.googleapis.com/maps/api/staticmap?center=${this.props.data.map_location}&zoom=13&size=450x250&markers=${this.props.data.map_location}` }}
/> />
</TouchableHighlight>
<Text style={styles.titleText}>{this.props.data.title}</Text> <Text style={styles.titleText}>{this.props.data.title}</Text>
{this.eventDesc(this.props.data)} {this.eventDesc(this.props.data)}
{this.eventActions(this.props.data)} {this.eventActions(this.props.data)}
...@@ -338,6 +343,7 @@ Event.propTypes = { ...@@ -338,6 +343,7 @@ Event.propTypes = {
register: PropTypes.func.isRequired, register: PropTypes.func.isRequired,
cancel: PropTypes.func.isRequired, cancel: PropTypes.func.isRequired,
fields: PropTypes.func.isRequired, fields: PropTypes.func.isRequired,
openMaps: PropTypes.func.isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
...@@ -352,6 +358,7 @@ const mapDispatchToProps = dispatch => ({ ...@@ -352,6 +358,7 @@ const mapDispatchToProps = dispatch => ({
register: event => dispatch(registrationActions.register(event)), register: event => dispatch(registrationActions.register(event)),
cancel: registration => dispatch(registrationActions.cancel(registration)), cancel: registration => dispatch(registrationActions.cancel(registration)),
fields: registration => dispatch(registrationActions.retrieveFields(registration)), fields: registration => dispatch(registrationActions.retrieveFields(registration)),
openMaps: location => Linking.openURL(`https://maps.${Platform.OS === 'ios' ? 'apple' : 'google'}.com/maps?daddr=${location}`),
}); });
export default connect(mapStateToProps, mapDispatchToProps)(Event); export default connect(mapStateToProps, mapDispatchToProps)(Event);
...@@ -9,13 +9,15 @@ const styles = create({ ...@@ -9,13 +9,15 @@ const styles = create({
padding: 16, padding: 16,
backgroundColor: colors.background, backgroundColor: colors.background,
}, },
locationImage: { locationImageWrapper: {
height: 150,
marginLeft: -16, marginLeft: -16,
marginRight: -16, marginRight: -16,
marginTop: -16, marginTop: -16,
marginBottom: 24, marginBottom: 24,
}, },
locationImage: {
height: 150,
},
titleText: { titleText: {
marginBottom: 16, marginBottom: 16,
fontSize: 20, fontSize: 20,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment