diff options
Diffstat (limited to 'mobile')
| -rw-r--r-- | mobile/App.js | 11 | ||||
| -rw-r--r-- | mobile/components/FormPage.js | 26 | ||||
| -rw-r--r-- | mobile/screens/MapPage.js | 154 |
3 files changed, 97 insertions, 94 deletions
diff --git a/mobile/App.js b/mobile/App.js index 703c6eb..c9331bc 100644 --- a/mobile/App.js +++ b/mobile/App.js @@ -8,10 +8,15 @@ import FormPage from './screens/Form1'; import MapPage from './screens/MapPage'; -const RootStack = createStackNavigator( {GreetingPage: GreetingPage, FormPage: FormPage, MapPage: MapPage}, - {headerMode: 'none'}) +const RootStack = createStackNavigator( + { + GreetingPage: GreetingPage, + FormPage: FormPage, + MapPage: MapPage + }, + { headerMode: 'none' } +) const App = createAppContainer(RootStack) export default App; - diff --git a/mobile/components/FormPage.js b/mobile/components/FormPage.js index 9ea3dce..5fa4abb 100644 --- a/mobile/components/FormPage.js +++ b/mobile/components/FormPage.js @@ -4,17 +4,17 @@ import { Ionicons } from '@expo/vector-icons'; import { createStackNavigator, createAppContainer } from 'react-navigation'; export default class FormPage extends Component { - render() { - return ( - <View marginTop = {50}> - <Text> - Put the form stuff here - </Text> - <Button - onPress={() => this.props.navigation.navigate('GreetingPage')} - title='Go Back' - /> - </View> - ); - } + render() { + return ( + <View marginTop = {50}> + <Text> + Put the form stuff here + </Text> + <Button + onPress={() => this.props.navigation.navigate('GreetingPage')} + title='Go Back' + /> + </View> + ); + } } diff --git a/mobile/screens/MapPage.js b/mobile/screens/MapPage.js index f8e2a79..7cdb873 100644 --- a/mobile/screens/MapPage.js +++ b/mobile/screens/MapPage.js @@ -14,86 +14,84 @@ import {MapView} from 'expo'; 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'); - } + 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)} - > + 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> + { + 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> - ); + <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', + first_button_container: { + width: '100%', + flex: 1, + position: 'absolute', bottom:60, backgroundColor: '#c0392b', flexDirection: 'row', @@ -101,9 +99,9 @@ const styles = StyleSheet.create( { alignItems: 'stretch' }, second_button_container: { - width: '100%', - flex: 1, - position: 'absolute', + width: '100%', + flex: 1, + position: 'absolute', bottom:0, backgroundColor: '#535c68', flexDirection: 'row', @@ -118,4 +116,4 @@ const styles = StyleSheet.create( { opacity: 0.9, fontSize: 20 } -})
\ No newline at end of file +}) |