From 9438381045c142d38bd1aa28c307723fdb016e4a Mon Sep 17 00:00:00 2001 From: Andrew Date: Sun, 24 Feb 2019 10:24:43 -0500 Subject: Created the greeting page of application. Page contains button to fetch location, and button to drop pin. Both buttons lead to blank pages. This is an initial prototype. --- mobile/components/GreetingPage.js | 112 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 mobile/components/GreetingPage.js (limited to 'mobile/components/GreetingPage.js') diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js new file mode 100644 index 0000000..8b87474 --- /dev/null +++ b/mobile/components/GreetingPage.js @@ -0,0 +1,112 @@ +import React, { Component } from 'react'; +import { Text, View, Alert, StyleSheet, Button, AppRegistry, Navigator, TouchableHighlight} from 'react-native'; +import { Ionicons } from '@expo/vector-icons'; +import { createStackNavigator, createAppContainer } from 'react-navigation'; + +export default class GreetingPage extends Component { + //Every component needs a render() function + render() { + return ( + // acts like the way
does in JavaScript + //style={...} stores properties about where you want the component to be placed + //and how you want it to look. It's similar to adding CSS styles to HTML elements + //when creating web pages + + + + + + [Place text here!] + + + + this.props.navigation.navigate('FormPage')}> + + + + + + Use Current Location + + + + + + + + + + + + this.props.navigation.navigate('FormPage')}> + + + + + Drop Pin + + + + + + + + + + + + ); + } +} + + +const styles = StyleSheet.create( { + container: { + flex: 1, + flexDirection: 'column', + backgroundColor: '#40739e', + alignItems: 'stretch' + }, + titleContainer: { + flex: 3, + //position: 'absolute', + marginTop: 205, + //flexGrow: 1 + }, + title: { + color: '#FFF', + marginTop: 10, + textAlign: 'center', + opacity: 0.9, + fontSize: 30 + }, + current_location_title: { + color: '#FFF', + marginTop: 15, + textAlign: 'center', + opacity: 0.9, + fontSize: 20 + }, + first_button_container: { + flex: 1, + //position: 'absolute', + //marginTop: 360, + backgroundColor: '#c0392b', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch' + }, + press_button: { + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center' + }, + second_button_container: { + flex: 1, + backgroundColor: '#535c68' + } +}) -- cgit v1.2.3 From e40e046cc7f62db42d0b634870da4de020e9108a Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 5 Mar 2019 09:33:54 -0500 Subject: Added location functionality to greeting page. Location data is now sent to the form page after the 'get location' button is pressed. --- mobile/components/GreetingPage.js | 50 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 48 insertions(+), 2 deletions(-) (limited to 'mobile/components/GreetingPage.js') diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js index 8b87474..5e6d502 100644 --- a/mobile/components/GreetingPage.js +++ b/mobile/components/GreetingPage.js @@ -1,10 +1,55 @@ import React, { Component } from 'react'; -import { Text, View, Alert, StyleSheet, Button, AppRegistry, Navigator, TouchableHighlight} from 'react-native'; +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'; export default class GreetingPage extends Component { //Every component needs a render() function + state = { + location: null, + errorMessage: null, + }; + + componentWillMount() { + if (Platform.OS === 'android' && !Constants.isDevice) { + this.setState({ + errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!', + }); + } else { + this._getLocationAsync(); + } + } + + _getLocationAsync = async () => { + let { status } = await Permissions.askAsync(Permissions.LOCATION); + if (status !== 'granted') { + this.setState({ + errorMessage: 'Permission to access location was denied', + }); + } + + let location = await Location.getCurrentPositionAsync({}); + this.setState({ location }); + }; + + getCurrentLocation = () => { + + navigator.geolocation.getCurrentPosition( + position => { + this.recorded_coordinates = JSON.stringify([position.coords.latitude, position.coords.longitude]); + }, + ); + } + + moveToFormPage = () => { + this._getLocationAsync; + const coordinates = [this.state.location.coords.longitude, this.state.location.coords.latitude] + // Alert.alert(JSON.stringify(coordinates)); + this.props.navigation.navigate('FormPage', {coordinates : coordinates}); + } + + render() { return ( // acts like the way
does in JavaScript @@ -22,7 +67,8 @@ export default class GreetingPage extends Component { this.props.navigation.navigate('FormPage')}> + onPress={() => { this.moveToFormPage() + }}> -- cgit v1.2.3 From f0b0f909dfb7658312c5df0a18591a203077282f Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 5 Mar 2019 16:15:37 -0500 Subject: Added A "Go Back" button to the form page. Fixed bug that would cause app to produce an error if location services are turned off. Please enter the commit message for your changes. Lines starting --- mobile/components/GreetingPage.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) (limited to 'mobile/components/GreetingPage.js') diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js index 5e6d502..9d1d410 100644 --- a/mobile/components/GreetingPage.js +++ b/mobile/components/GreetingPage.js @@ -14,7 +14,7 @@ export default class GreetingPage extends Component { componentWillMount() { if (Platform.OS === 'android' && !Constants.isDevice) { this.setState({ - errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!', + errorMessage: 'This will not work on an android device', }); } else { this._getLocationAsync(); @@ -33,19 +33,13 @@ export default class GreetingPage extends Component { this.setState({ location }); }; - getCurrentLocation = () => { - - navigator.geolocation.getCurrentPosition( - position => { - this.recorded_coordinates = JSON.stringify([position.coords.latitude, position.coords.longitude]); - }, - ); - } - moveToFormPage = () => { this._getLocationAsync; - const coordinates = [this.state.location.coords.longitude, this.state.location.coords.latitude] - // Alert.alert(JSON.stringify(coordinates)); + if (this.state.location === null) { + Alert.alert("There was a problem accessing your location"); + return; + } + const coordinates = [this.state.location.coords.longitude, this.state.location.coords.latitude]; this.props.navigation.navigate('FormPage', {coordinates : coordinates}); } -- cgit v1.2.3 From 41ae967e0a458d9728e76401bd08385dd03b3c74 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Tue, 5 Mar 2019 19:25:49 -0500 Subject: added ui package, edited text on greeting page, using new ui package in form page --- mobile/components/GreetingPage.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'mobile/components/GreetingPage.js') diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js index 9d1d410..ad1f1c1 100644 --- a/mobile/components/GreetingPage.js +++ b/mobile/components/GreetingPage.js @@ -55,19 +55,19 @@ export default class GreetingPage extends Component { - [Place text here!] + Ensure that location services are enabled! - { this.moveToFormPage() }}> - + Use Current Location @@ -86,7 +86,7 @@ export default class GreetingPage extends Component { - + Drop Pin @@ -122,7 +122,8 @@ const styles = StyleSheet.create( { marginTop: 10, textAlign: 'center', opacity: 0.9, - fontSize: 30 + fontSize: 18, + fontStyle: 'italic' }, current_location_title: { color: '#FFF', -- cgit v1.2.3 From 850937e8de7448f12af126047e4e270fb9976473 Mon Sep 17 00:00:00 2001 From: Andrew Date: Fri, 8 Mar 2019 00:07:06 -0500 Subject: Got rid of drop pin button. Necessary for deliverable 2. --- mobile/components/GreetingPage.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'mobile/components/GreetingPage.js') diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js index ad1f1c1..e8da92e 100644 --- a/mobile/components/GreetingPage.js +++ b/mobile/components/GreetingPage.js @@ -80,15 +80,13 @@ export default class GreetingPage extends Component { - this.props.navigation.navigate('FormPage')}> + - - Drop Pin - + + Drop Pin + -- cgit v1.2.3