diff options
Diffstat (limited to 'mobile')
| -rw-r--r-- | mobile/app.json | 9 | ||||
| -rw-r--r-- | mobile/components/GreetingPage.js | 181 |
2 files changed, 104 insertions, 86 deletions
diff --git a/mobile/app.json b/mobile/app.json index 48162b1..c990fce 100644 --- a/mobile/app.json +++ b/mobile/app.json @@ -1,7 +1,7 @@ { "expo": { - "name": "hello-world", - "slug": "hello-world", + "name": "Helpthehome", + "slug": "helpthehome", "privacy": "public", "sdkVersion": "32.0.0", "platforms": [ @@ -24,6 +24,9 @@ ], "ios": { "supportsTablet": true + }, + "android": { + "package": "com.yourcompany.yourappname" } } -}
\ No newline at end of file +} diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js index e8da92e..9301fbc 100644 --- a/mobile/components/GreetingPage.js +++ b/mobile/components/GreetingPage.js @@ -5,96 +5,111 @@ 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, + isLoading: true, errorMessage: null, + locationResult: null, }; - componentWillMount() { - if (Platform.OS === 'android' && !Constants.isDevice) { - this.setState({ - errorMessage: 'This will not work on an android device', - }); - } else { + // runs as soon as page is loaded + componentDidMount() { + // immediately attempt to get the location this._getLocationAsync(); - } } _getLocationAsync = async () => { - let { status } = await Permissions.askAsync(Permissions.LOCATION); - if (status !== 'granted') { - this.setState({ - errorMessage: 'Permission to access location was denied', + // ask location services to allow location access to THIS app. + // Note: location services itself must still be enabled for this! + const {status} = await Permissions.askAsync(Permissions.LOCATION); + if (status === 'granted') { + // try to actually get the location asynchronously - a Promise + Location.getCurrentPositionAsync({enableHighAccuracy: true}).then((position) => { + this.setState({locationResult: position.coords}); + // since we are guaranteed to have the location here, its safe to load the full view + this.setState({isLoading: false}); + }).catch((e) => { + alert(e + ' Please make sure your location (GPS) is turned on.'); }); - } - let location = await Location.getCurrentPositionAsync({}); - this.setState({ location }); + } else { + // if the user pressed "Deny" or something on the promt + throw new Error('Location permission not granted'); + } }; moveToFormPage = () => { - this._getLocationAsync; - 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}); - } + this.props.navigation.navigate('FormPage', + {coordinates : [ + this.state.locationResult.longitude, + this.state.locationResult.latitude] + }); + }; render() { + //<View> acts like the way <div> 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 + + // initialy show a loading screen when trying to get location on load + if (this.state.isLoading) { + return ( + <View style={styles.container}> + <View style={styles.titleContainer}> + <Text style={styles.title}> + Trying to get location... + </Text> + </View> + </View> + ) + } + return ( - //<View> acts like the way <div> 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 <View style={styles.container}> - <View style={styles.titleContainer}> - <Text style={styles.title}> - Ensure that location services are enabled! - </Text> - </View> + <View style={styles.titleContainer}> + <Text style={styles.title}> + Welcome to Helpthehome! + </Text> + </View> - <TouchableHighlight - style={styles.first_button_container} - onPress={() => { this.moveToFormPage() - }}> + <TouchableHighlight + style={styles.first_button_container} + onPress={() => { this.moveToFormPage() }}> - <View style={styles.press_button}> + <View style={styles.press_button}> - <View> - <Text style={styles.current_location_title}> - Use Current Location - </Text> - </View> + <View> + <Text style={styles.current_location_title}> + Use Current Location + </Text> + </View> - <View marginTop = {20}> - <Ionicons name="md-locate" size={40} color="white"/> - </View> + <View marginTop = {20}> + <Ionicons name="md-locate" size={40} color="white"/> + </View> - </View> + </View> - </TouchableHighlight> + </TouchableHighlight> - <TouchableHighlight style={styles.second_button_container}> - <View style={styles.press_button}> + <TouchableHighlight disabled style={styles.second_button_container}> + <View style={styles.press_button}> - <View> - <Text style={styles.current_location_title}> - Drop Pin - </Text> - </View> + <View> + <Text style={styles.current_location_title}> + Drop Pin + </Text> + </View> - <View marginTop = {20}> - <Ionicons name="md-pin" size={40} color="white"/> - </View> + <View marginTop = {20}> + <Ionicons name="md-pin" size={40} color="white"/> + </View> - </View> - </TouchableHighlight> + </View> + </TouchableHighlight> </View> ); @@ -110,42 +125,42 @@ const styles = StyleSheet.create( { alignItems: 'stretch' }, titleContainer: { - flex: 3, + flex: 3, //position: 'absolute', marginTop: 205, //flexGrow: 1 }, title: { - color: '#FFF', - marginTop: 10, - textAlign: 'center', - opacity: 0.9, - fontSize: 18, + color: '#FFF', + marginTop: 10, + textAlign: 'center', + opacity: 0.9, + fontSize: 18, fontStyle: 'italic' }, current_location_title: { - color: '#FFF', - marginTop: 15, - textAlign: 'center', - opacity: 0.9, - fontSize: 20 + 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' + flex: 1, + //position: 'absolute', + //marginTop: 360, + backgroundColor: '#c0392b', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch' }, press_button: { - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center' + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center' }, second_button_container: { - flex: 1, - backgroundColor: '#535c68' + flex: 1, + backgroundColor: '#535c68' } }) |