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/SettingsScreen.js14
4 files changed, 183 insertions, 229 deletions
diff --git a/mobile/screens/GreetingPage.js b/mobile/screens/GreetingPage.js
new file mode 100644
index 0000000..0bfa63b
--- /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/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:29:31 +0000