diff options
Diffstat (limited to 'mobile')
| -rw-r--r-- | mobile/App.js | 29 | ||||
| -rw-r--r-- | mobile/components/FormPage.js | 20 | ||||
| -rw-r--r-- | mobile/components/GreetingPage.js | 158 |
3 files changed, 192 insertions, 15 deletions
diff --git a/mobile/App.js b/mobile/App.js index 7271bc2..c1b9eba 100644 --- a/mobile/App.js +++ b/mobile/App.js @@ -1,17 +1,16 @@ import React, { Component } from 'react'; -import { Text, View } from 'react-native'; +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 HelloWorldApp extends Component { - //Every component needs a render() function - render() { - 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={{ flex: 1, justifyContent: "center", alignItems: "center" }}> - <Text>Hello world!</Text> - </View> - ); - } -} +import GreetingPage from './components/GreetingPage'; +import FormPage from './components/Form1'; + + +const RootStack = createStackNavigator( {GreetingPage: GreetingPage, FormPage: FormPage,}, + {headerMode: 'none'}) + +const App = createAppContainer(RootStack) + +export default App; + diff --git a/mobile/components/FormPage.js b/mobile/components/FormPage.js new file mode 100644 index 0000000..9ea3dce --- /dev/null +++ b/mobile/components/FormPage.js @@ -0,0 +1,20 @@ +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 FormPage extends Component { + render() { + return ( + <View marginTop = {50}> + <Text> + Put the form stuff here + </Text> + <Button + onPress={() => this.props.navigation.navigate('GreetingPage')} + title='Go Back' + /> + </View> + ); + } +} diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js new file mode 100644 index 0000000..5e6d502 --- /dev/null +++ b/mobile/components/GreetingPage.js @@ -0,0 +1,158 @@ +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 { + //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 ( + //<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}> + [Place text here!] + </Text> + </View> + + <TouchableHighlight + style={styles.first_button_container} + onPress={() => { this.moveToFormPage() + }}> + + <View style={styles.press_button}> + + <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> + + </TouchableHighlight> + + <TouchableHighlight + style={styles.second_button_container} + onPress={() => this.props.navigation.navigate('FormPage')}> + <View style={styles.press_button}> + + <View> + <Text style={styles.current_location_title}> + Drop Pin + </Text> + </View> + + <View marginTop = {20}> + <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: 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' + } +}) |