Merge pull request #13 from csc301-winter-2019/feat/5

Feat/5

3 files changed, 146 insertions, 15 deletions

diff --git a/mobile/App.js b/mobile/App.js
index 7271bc2..4348381 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/FormPage';
+
+
+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..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 (
+    	//<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.props.navigation.navigate('FormPage')}>
+
+      		<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'
+  }
+})