*

Ejectable/GT2Service.js

@@ -2,10 +2,16 @@ import React, { useState, useEffect } from 'react';
 import { Platform, Text, View, StyleSheet } from 'react-native';
 import * as Location from 'expo-location';
 
-export default function GT2Service() {
+export class GT2Service {
+
+  constructor () {
   const [location, setLocation] = useState(null);
   const [errorMsg, setErrorMsg] = useState(null);
 
+  }
+
+  start() {
+
   useEffect(() => {
     (async () => {
       let { status } = await Location.requestForegroundPermissionsAsync();
@@ -31,5 +37,6 @@ export default function GT2Service() {
       <Text style={styles.paragraph}>{text}</Text>
     </View>
     );
-}
+  }
 
+}

Ejectable/components/ScreenInfo.tsx

@@ -13,7 +13,7 @@ export default function ScreenInfo() {
           style={styles.settingsText}
           lightColor="rgba(0,0,0,0.8)"
           darkColor="rgba(255,255,255,0.8)">
-          Toggle km/mi, select fuel used, or manually set CO2 per distance                  
+          Switch dark km/ light mi, select fuel used, or manually set CO2 per distance                  
         </Text>  
     </View>
   );

Ejectable/package.json

@@ -22,6 +22,7 @@
     "expo-constants": "~11.0.1",
     "expo-font": "~9.2.1",
     "expo-linking": "~2.3.1",
+    "expo-location": "~12.1.2",
     "expo-splash-screen": "~0.11.2",
     "expo-status-bar": "~1.0.4",
     "expo-web-browser": "~9.2.0",
@@ -32,8 +33,7 @@
     "react-native-reanimated": "~2.2.0",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "~3.4.0",
-    "react-native-web": "~0.13.12",
+    "react-native-web": "~0.13.12"
-    "expo-location": "~12.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

Ejectable/screens/SettingsScreen.tsx

@@ -1,59 +1,82 @@
 import * as React from 'react';
-import { StyleSheet, Switch, TextInput } from 'react-native';
+import { Alert, Button, StyleSheet, Switch, TextInput } from 'react-native';
 import { Text, View } from '../components/Themed';
 import { useState } from 'react';
-import SettingsScreenInfo from '../components/SettingsScreenInfo';
+import ScreenInfo from '../components/ScreenInfo';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function SettingsScreen() {
-  const [text, onChangeText] = React.useState("Useless Text");
+  const [number, onChangeNumber] = React.useState("");
-  const [number, onChangeNumber] = React.useState(null);
+  const [isKM, setMiles] = useState(false);
-  const [isKM, setIsKM] = useState(false);
+  const toggleUnits = () => setMiles(previousState => !previousState);
-  const toggleUnits = () => setIsKM(previousState => !previousState);
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Model Settings</Text>
       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-       <SettingsScreenInfo />
+       <ScreenInfo />
        <Switch
+        style={styles.switch}
         trackColor={{ false: "#767577", true: "#81b0ff" }}
         thumbColor={true ? "#f5dd4b" : "#f4f3f4"}
         ios_backgroundColor="#3e3e3e"
         onValueChange={toggleUnits}
         value={isKM}
        />
+       <View style={styles.controls} >
+       <Button
+         title="Jet"
+         onPress={() => Alert.alert('Jet Fuel Selected')}
+       />
+       <Button
+       title="Gasoline"
+       onPress={() => Alert.alert('Gasoline Selected')}
+       />  
+       <Button
+       title="Food"
+       onPress={() => Alert.alert('Savings vs Gasoline Selected')}
+       />
+       </View>
        <TextInput   
         style={styles.input}
+        returnKeyType={'done'}
         onChangeText={onChangeNumber}
         value={number}
-        defaultValue="0.66666"
+        placeholder="0.67"
-        returnKeyType={'done'}
-        placeholder="CO2 Per km/mi"
         keyboardType="numeric"
        />      
     </View>
   );
 }
 
+
 const styles = StyleSheet.create({
+  switch: {
+    marginVertical: 20,
+  },
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  controls: {
+    marginVertical: 20,
+    width: "80%",
+    flexDirection: 'row',
+    justifyContent: "space-between",
+  },
   title: {
     fontSize: 20,
     fontWeight: 'bold',
   },
   separator: {
-    marginVertical: 30,
+    marginVertical: 10,
     height: 1,
     width: '80%',
   },
   input: {
     height: 40,
-    margin: 12,
+    margin: 30,
     borderWidth: 1,
     padding: 10,
   },

Ejectable/screens/TripScreen.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { Button, StyleSheet, Alert } from 'react-native';
 import { Text, View } from '../components/Themed';
+import { GT2Service } from '../GT2Service.js';
+import { ScreenInfo2 } from '../components/ScreenInfo';
 
 export default function TripScreen() {
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Trip Control</Text>
       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />  
-     
+      <ScreenInfo2 />
       <View style={styles.controls} >
       <Button
         title="Start"
@@ -42,7 +44,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   separator: {
-    marginVertical: 30,
+    marginVertical: 10,
     height: 1,
     width: '80%',
   },