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 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 Moment from 'moment';
import 'moment/locale/nl';
......@@ -267,11 +267,16 @@ class Event extends Component {
onRefresh={this.handleRefresh}
/>
)}
>
<TouchableHighlight
onPress={() => this.props.openMaps(this.props.data.map_location)}
style={styles.locationImageWrapper}
>
<Image
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}` }}
/>
</TouchableHighlight>
<Text style={styles.titleText}>{this.props.data.title}</Text>
{this.eventDesc(this.props.data)}
{this.eventActions(this.props.data)}
......@@ -338,6 +343,7 @@ Event.propTypes = {
register: PropTypes.func.isRequired,
cancel: PropTypes.func.isRequired,
fields: PropTypes.func.isRequired,
openMaps: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
......@@ -352,6 +358,7 @@ const mapDispatchToProps = dispatch => ({
register: event => dispatch(registrationActions.register(event)),
cancel: registration => dispatch(registrationActions.cancel(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);
......@@ -9,13 +9,15 @@ const styles = create({
padding: 16,
backgroundColor: colors.background,
},
locationImage: {
height: 150,
locationImageWrapper: {
marginLeft: -16,
marginRight: -16,
marginTop: -16,
marginBottom: 24,
},
locationImage: {
height: 150,
},
titleText: {
marginBottom: 16,
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