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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import React, { Component } from 'react';
import { Text, View, Alert, StyleSheet, Button, AppRegistry, Navigator, TouchableHighlight, Platform} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { Location, Permissions, Constants } from 'expo';
import {MapView} from 'expo';
// press location on map
// on press, drop pin at location
// press proceed to redirect to the formpage
// default initial map region is Toronto
export default class Form1 extends Component {
constructor(props) {
super(props);
this.state = {
initial_region_coordinates: [-79.3832, 43.6532],
markers: [],
canProceed: false,
}
}
addMarker(e) {
this.setState(
{ markers : [{ latlng: e.nativeEvent.coordinate}], canProceed: true}
);
}
deleteMarker() {
this.setState(
{ markers : [], canProceed: false}
);
}
moveToFormPage = () => {
if(this.state.canProceed === false) {
alert("Please press on the map to drop a pin");
return;
}
this.props.navigation.navigate('FormPage',
{coordinates : [
this.state.markers[0].latlng.longitude,
this.state.markers[0].latlng.latitude]
});
};
moveToGreetingPage = () => {
this.props.navigation.navigate('GreetingPage');
}
render() {
return (
<View style={{flex:1,}}>
<View style={{flex:3}}>
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: this.state.initial_region_coordinates[1],
longitude: this.state.initial_region_coordinates[0],
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onPress={this.addMarker.bind(this)}
>
{
this.state.markers.map((marker, i) => (<MapView.Marker key={i} coordinate={marker.latlng}
onPress={(e) => {e.stopPropagation(); this.deleteMarker(i)}} />))
}
</MapView>
</View>
<TouchableHighlight
style={styles.first_button_container}
onPress={() => { this.moveToFormPage() }}>
<Text style={styles.proceed_title}>
Proceed
</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.second_button_container}
onPress={() => { this.moveToGreetingPage() }}>
<Text style={styles.proceed_title}>
Back
</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create( {
first_button_container: {
width: '100%',
flex: 1,
position: 'absolute',
bottom:60,
backgroundColor: '#c0392b',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch'
},
second_button_container: {
width: '100%',
flex: 1,
position: 'absolute',
bottom:0,
backgroundColor: '#535c68',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch'
},
proceed_title: {
color: '#FFF',
marginTop: 15,
marginBottom: 35,
textAlign: 'center',
opacity: 0.9,
fontSize: 20
}
})
|
