diff options
| -rw-r--r-- | mobile/App.js | 3 | ||||
| -rw-r--r-- | mobile/components/GreetingPage.js | 27 | ||||
| -rw-r--r-- | mobile/screens/MapPage.js | 121 |
3 files changed, 144 insertions, 7 deletions
diff --git a/mobile/App.js b/mobile/App.js index f36b696..703c6eb 100644 --- a/mobile/App.js +++ b/mobile/App.js @@ -5,9 +5,10 @@ import { createStackNavigator, createAppContainer } from 'react-navigation'; import GreetingPage from './components/GreetingPage'; import FormPage from './screens/Form1'; +import MapPage from './screens/MapPage'; -const RootStack = createStackNavigator( {GreetingPage: GreetingPage, FormPage: FormPage,}, +const RootStack = createStackNavigator( {GreetingPage: GreetingPage, FormPage: FormPage, MapPage: MapPage}, {headerMode: 'none'}) const App = createAppContainer(RootStack) diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js index 4f68132..435022d 100644 --- a/mobile/components/GreetingPage.js +++ b/mobile/components/GreetingPage.js @@ -45,6 +45,10 @@ export default class GreetingPage extends Component { }); }; + moveToMapPage = () => { + this.props.navigation.navigate('MapPage'); + } + render() { //<View> acts like the way <div> does in JavaScript @@ -71,7 +75,10 @@ export default class GreetingPage extends Component { <View style={styles.titleContainer}> <Text style={styles.title}> - Welcome to Helpthehome! + See a homeless person who might need help? {"\n\n"}TELL US!! + </Text> + <Text style={styles.subtitle}> + Tell us where they are ⬇ {"\n\n"}(And don't worry, we won't force you to share your location) </Text> </View> @@ -95,7 +102,9 @@ export default class GreetingPage extends Component { </TouchableHighlight> - <TouchableHighlight disabled style={styles.second_button_container}> + <TouchableHighlight + style={styles.second_button_container} + onPress={() => { this.moveToMapPage() }}> <View style={styles.press_button}> <View padding={15}> @@ -125,18 +134,24 @@ const styles = StyleSheet.create( { alignItems: 'stretch' }, titleContainer: { - flex: 3, + flex: 4, //position: 'absolute', - marginTop: 205, + marginTop: 100, //flexGrow: 1 }, title: { color: '#FFF', - marginTop: 10, + padding: 35, textAlign: 'center', opacity: 0.9, + fontSize: 24, + fontStyle: 'italic', + }, + subtitle: { + color: "#FFF" , + padding: 20, + textAlign: "center", fontSize: 18, - fontStyle: 'italic' }, current_location_title: { color: '#FFF', diff --git a/mobile/screens/MapPage.js b/mobile/screens/MapPage.js new file mode 100644 index 0000000..f8e2a79 --- /dev/null +++ b/mobile/screens/MapPage.js @@ -0,0 +1,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 + } +})
\ No newline at end of file |