aboutsummaryrefslogtreecommitdiff
path: root/mobile/screens
diff options
context:
space:
mode:
Diffstat (limited to 'mobile/screens')
-rw-r--r--mobile/screens/GreetingPage.js183
-rw-r--r--mobile/screens/HomeScreen.js188
-rw-r--r--mobile/screens/LinksScreen.js27
-rw-r--r--mobile/screens/MapPage.js154
-rw-r--r--mobile/screens/SettingsScreen.js14
5 files changed, 259 insertions, 307 deletions
diff --git a/mobile/screens/GreetingPage.js b/mobile/screens/GreetingPage.js
new file mode 100644
index 0000000..18c202f
--- /dev/null
+++ b/mobile/screens/GreetingPage.js
@@ -0,0 +1,183 @@
+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';
+
+export default class GreetingPage extends Component {
+ state = {
+ isLoading: false,
+ errorMessage: null,
+ locationResult: null,
+ };
+
+ moveToFormPage = async () => {
+ this.setState({isLoading: true});
+ // 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}, () => {
+ this.props.navigation.navigate('FormPage',
+ {coordinates : [
+ this.state.locationResult.longitude,
+ this.state.locationResult.latitude]
+ });
+ });
+ // since we are guaranteed to have the location here, its safe to load the full view
+ this.setState({isLoading: false});
+ // move to form page
+ }).catch((e) => {
+ this.setState({isLoading: false});
+ alert(e + ' Please make sure your location (GPS) is turned on.');
+ });
+
+ } else {
+ // if the user pressed "Deny" or something on the promt
+ throw new Error('Location permission not granted');
+ }
+ };
+
+ moveToMapPage = () => {
+ this.props.navigation.navigate('MapPage');
+ }
+
+ moveToMapPage = () => {
+ this.props.navigation.navigate('MapPage');
+ }
+
+
+ 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 style={styles.container}>
+
+ <View style={styles.titleContainer}>
+ <Text style={styles.title}>
+ 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>
+
+ <TouchableHighlight
+ style={styles.first_button_container}
+ onPress={() => { this.moveToFormPage(); }}>
+
+ <View style={styles.press_button}>
+
+ <View padding={15}>
+ <Text style={styles.current_location_title}>
+ Use Current Location
+ </Text>
+ </View>
+
+ <View marginTop = {5}>
+ <Ionicons name="md-locate" size={40} color="white"/>
+ </View>
+
+ </View>
+
+ </TouchableHighlight>
+
+ <TouchableHighlight
+ style={styles.second_button_container}
+ onPress={() => { this.moveToMapPage() }}>
+ <View style={styles.press_button}>
+
+ <View padding={15}>
+ <Text style={styles.current_location_title}>
+ Drop Pin
+ </Text>
+ </View>
+
+ <View>
+ <Ionicons name="md-pin" size={40} color="white"/>
+ </View>
+
+ </View>
+ </TouchableHighlight>
+
+ </View>
+ );
+ }
+}
+
+
+const styles = StyleSheet.create( {
+ container: {
+ flex: 1,
+ flexDirection: 'column',
+ backgroundColor: '#40739e',
+ alignItems: 'stretch'
+ },
+ titleContainer: {
+ flex: 4,
+ //position: 'absolute',
+ marginTop: 100,
+ //flexGrow: 1
+ },
+ title: {
+ color: '#FFF',
+ padding: 35,
+ textAlign: 'center',
+ opacity: 0.9,
+ fontSize: 24,
+ fontStyle: 'italic',
+ },
+ subtitle: {
+ color: "#FFF" ,
+ padding: 20,
+ textAlign: "center",
+ fontSize: 18,
+ },
+ current_location_title: {
+ color: '#FFF',
+ 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: 'row',
+ justifyContent: 'space-between',
+ // padding:5,
+ alignItems: 'center'
+ },
+ second_button_container: {
+ flex: 1,
+ backgroundColor: '#535c68',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'stretch'
+ }
+})
diff --git a/mobile/screens/HomeScreen.js b/mobile/screens/HomeScreen.js
deleted file mode 100644
index 0d3548e..0000000
--- a/mobile/screens/HomeScreen.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import React from 'react';
-import {
- Image,
- Platform,
- ScrollView,
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
-} from 'react-native';
-import { WebBrowser } from 'expo';
-
-import { MonoText } from '../components/StyledText';
-
-export default class HomeScreen extends React.Component {
- static navigationOptions = {
- header: null,
- };
-
- render() {
- return (
- <View style={styles.container}>
- <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
- <View style={styles.welcomeContainer}>
- <Image
- source={
- __DEV__
- ? require('../assets/images/robot-dev.png')
- : require('../assets/images/robot-prod.png')
- }
- style={styles.welcomeImage}
- />
- </View>
-
- <View style={styles.getStartedContainer}>
- {this._maybeRenderDevelopmentModeWarning()}
-
- <Text style={styles.getStartedText}>Get started by opening</Text>
-
- <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
- <MonoText style={styles.codeHighlightText}>screens/HomeScreen.js</MonoText>
- </View>
-
- <Text style={styles.getStartedText}>
- Change this text and your app will automatically reload.
- </Text>
- </View>
-
- <View style={styles.helpContainer}>
- <TouchableOpacity onPress={this._handleHelpPress} style={styles.helpLink}>
- <Text style={styles.helpLinkText}>Help, it didn’t automatically reload!</Text>
- </TouchableOpacity>
- </View>
- </ScrollView>
-
- <View style={styles.tabBarInfoContainer}>
- <Text style={styles.tabBarInfoText}>This is a tab bar. You can edit it in:</Text>
-
- <View style={[styles.codeHighlightContainer, styles.navigationFilename]}>
- <MonoText style={styles.codeHighlightText}>navigation/MainTabNavigator.js</MonoText>
- </View>
- </View>
- </View>
- );
- }
-
- _maybeRenderDevelopmentModeWarning() {
- if (__DEV__) {
- const learnMoreButton = (
- <Text onPress={this._handleLearnMorePress} style={styles.helpLinkText}>
- Learn more
- </Text>
- );
-
- return (
- <Text style={styles.developmentModeText}>
- Development mode is enabled, your app will be slower but you can use useful development
- tools. {learnMoreButton}
- </Text>
- );
- } else {
- return (
- <Text style={styles.developmentModeText}>
- You are not in development mode, your app will run at full speed.
- </Text>
- );
- }
- }
-
- _handleLearnMorePress = () => {
- WebBrowser.openBrowserAsync('https://docs.expo.io/versions/latest/guides/development-mode');
- };
-
- _handleHelpPress = () => {
- WebBrowser.openBrowserAsync(
- 'https://docs.expo.io/versions/latest/guides/up-and-running.html#can-t-see-your-changes'
- );
- };
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- },
- developmentModeText: {
- marginBottom: 20,
- color: 'rgba(0,0,0,0.4)',
- fontSize: 14,
- lineHeight: 19,
- textAlign: 'center',
- },
- contentContainer: {
- paddingTop: 30,
- },
- welcomeContainer: {
- alignItems: 'center',
- marginTop: 10,
- marginBottom: 20,
- },
- welcomeImage: {
- width: 100,
- height: 80,
- resizeMode: 'contain',
- marginTop: 3,
- marginLeft: -10,
- },
- getStartedContainer: {
- alignItems: 'center',
- marginHorizontal: 50,
- },
- homeScreenFilename: {
- marginVertical: 7,
- },
- codeHighlightText: {
- color: 'rgba(96,100,109, 0.8)',
- },
- codeHighlightContainer: {
- backgroundColor: 'rgba(0,0,0,0.05)',
- borderRadius: 3,
- paddingHorizontal: 4,
- },
- getStartedText: {
- fontSize: 17,
- color: 'rgba(96,100,109, 1)',
- lineHeight: 24,
- textAlign: 'center',
- },
- tabBarInfoContainer: {
- position: 'absolute',
- bottom: 0,
- left: 0,
- right: 0,
- ...Platform.select({
- ios: {
- shadowColor: 'black',
- shadowOffset: { height: -3 },
- shadowOpacity: 0.1,
- shadowRadius: 3,
- },
- android: {
- elevation: 20,
- },
- }),
- alignItems: 'center',
- backgroundColor: '#fbfbfb',
- paddingVertical: 20,
- },
- tabBarInfoText: {
- fontSize: 17,
- color: 'rgba(96,100,109, 1)',
- textAlign: 'center',
- },
- navigationFilename: {
- marginTop: 5,
- },
- helpContainer: {
- marginTop: 15,
- alignItems: 'center',
- },
- helpLink: {
- paddingVertical: 15,
- },
- helpLinkText: {
- fontSize: 14,
- color: '#2e78b7',
- },
-});
diff --git a/mobile/screens/LinksScreen.js b/mobile/screens/LinksScreen.js
deleted file mode 100644
index 7bb4a62..0000000
--- a/mobile/screens/LinksScreen.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import { ExpoLinksView } from '@expo/samples';
-
-export default class LinksScreen extends React.Component {
- static navigationOptions = {
- title: 'Links',
- };
-
- render() {
- return (
- <ScrollView style={styles.container}>
- {/* Go ahead and delete ExpoLinksView and replace it with your
- * content, we just wanted to provide you with some helpful links */}
- <ExpoLinksView />
- </ScrollView>
- );
- }
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- paddingTop: 15,
- backgroundColor: '#fff',
- },
-});
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
+})
diff --git a/mobile/screens/SettingsScreen.js b/mobile/screens/SettingsScreen.js
deleted file mode 100644
index 6957dcb..0000000
--- a/mobile/screens/SettingsScreen.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { ExpoConfigView } from '@expo/samples';
-
-export default class SettingsScreen extends React.Component {
- static navigationOptions = {
- title: 'app.json',
- };
-
- render() {
- /* Go ahead and delete ExpoConfigView and replace it with your
- * content, we just wanted to give you a quick view of your config */
- return <ExpoConfigView />;
- }
-}
generated by cgit v1.2.3 (git 2.25.1) at 2026-08-02 08:31:32 +0000