*

Ejectable/App.tsx

@@ -1,6 +1,7 @@
 import 'react-native-gesture-handler';
 import { StatusBar } from 'expo-status-bar';
-import React from 'react';
+import React, { useState } from 'react';
+import Switch from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import useCachedResources from './hooks/useCachedResources';
@@ -10,6 +11,8 @@ import Navigation from './navigation';
 export default function App() {
   const isLoadingComplete = useCachedResources();
   const colorScheme = useColorScheme();
+  const [isKM, setIsKM] = useState(false);
+  const toggleUnits = () => setIsKM(previousState => !previousState);
 
   if (!isLoadingComplete) {
     return null;

Ejectable/components/EditScreenInfo.tsx

@@ -1,80 +0,0 @@
-import * as WebBrowser from 'expo-web-browser';
-import React from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
-
-import Colors from '../constants/Colors';
-import { MonoText } from './StyledText';
-import { Text, View } from './Themed';
-
-export default function EditScreenInfo({ path }: { path: string }) {
-  return (
-    <View>
-      <View style={styles.getStartedContainer}>
-        <Text
-          style={styles.getStartedText}
-          lightColor="rgba(0,0,0,0.8)"
-          darkColor="rgba(255,255,255,0.8)">
-          Open up the code for this screen:
-        </Text>
-
-        <View
-          style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
-          darkColor="rgba(255,255,255,0.05)"
-          lightColor="rgba(0,0,0,0.05)">
-          <MonoText>{path}</MonoText>
-        </View>
-
-        <Text
-          style={styles.getStartedText}
-          lightColor="rgba(0,0,0,0.8)"
-          darkColor="rgba(255,255,255,0.8)">
-          Change any of the text, save the file, and your app will automatically update.
-        </Text>
-      </View>
-
-      <View style={styles.helpContainer}>
-        <TouchableOpacity onPress={handleHelpPress} style={styles.helpLink}>
-          <Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
-            Tap here if your app doesn't automatically update after making changes
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-}
-
-function handleHelpPress() {
-  WebBrowser.openBrowserAsync(
-    'https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet'
-  );
-}
-
-const styles = StyleSheet.create({
-  getStartedContainer: {
-    alignItems: 'center',
-    marginHorizontal: 50,
-  },
-  homeScreenFilename: {
-    marginVertical: 7,
-  },
-  codeHighlightContainer: {
-    borderRadius: 3,
-    paddingHorizontal: 4,
-  },
-  getStartedText: {
-    fontSize: 17,
-    lineHeight: 24,
-    textAlign: 'center',
-  },
-  helpContainer: {
-    marginTop: 15,
-    marginHorizontal: 20,
-    alignItems: 'center',
-  },
-  helpLink: {
-    paddingVertical: 15,
-  },
-  helpLinkText: {
-    textAlign: 'center',
-  },
-});

Ejectable/components/SettingsScreenInfo.tsx

@@ -0,0 +1,33 @@
+import * as WebBrowser from 'expo-web-browser';
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import Colors from '../constants/Colors';
+import { MonoText } from './StyledText';
+import { Text, View } from './Themed';
+
+export default function SettingsScreenInfo() {
+  return (
+    <View style={styles.settingsContainer}>
+        <Text
+          style={styles.settingsText}
+          lightColor="rgba(0,0,0,0.8)"
+          darkColor="rgba(255,255,255,0.8)">
+          Toggle km/mi, set CO2/ea
+                   
+        </Text>  
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  settingsContainer: {
+    marginHorizontal: 50,
+  },
+  settingsText: {
+    fontSize: 17,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+
+});

Ejectable/screens/SettingsScreen.tsx

@@ -1,15 +1,36 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Switch, TextInput } from 'react-native';
-
-import EditScreenInfo from '../components/EditScreenInfo';
 import { Text, View } from '../components/Themed';
+import { useState } from 'react';
+import SettingsScreenInfo from '../components/SettingsScreenInfo';
 
 export default function SettingsScreen() {
+  const [text, onChangeText] = React.useState("Useless Text");
+  const [number, onChangeNumber] = React.useState(null);
+  const [isKM, setIsKM] = useState(false);
+  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)" />
-      <EditScreenInfo path="/screens/SettingsScreen.tsx" />
+      <SettingsScreenInfo />
+      <Switch
+        
+        trackColor={{ false: "#767577", true: "#81b0ff" }}
+        thumbColor={true ? "#f5dd4b" : "#f4f3f4"}
+        ios_backgroundColor="#3e3e3e"
+        onValueChange={toggleUnits}
+        value={isKM}
+      />
+      <TextInput
+        style={styles.input}
+        onChangeText={onChangeNumber}
+        value={number}
+        placeholder="CO2 Per km/mi"
+        keyboardType="numeric"
+      />
+   
     </View>
   );
 }
@@ -29,4 +50,10 @@ const styles = StyleSheet.create({
     height: 1,
     width: '80%',
   },
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
 });

Ejectable/screens/TripScreen.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { Button, StyleSheet, Alert } from 'react-native';
-
-import EditScreenInfo from '../components/EditScreenInfo';
 import { Text, View } from '../components/Themed';
 
 export default function TripScreen() {
@@ -9,7 +7,21 @@ export default function TripScreen() {
     <View style={styles.container}>
       <Text style={styles.title}>Trip Control</Text>
       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="/screens/TripScreen.tsx" />
+     
+      <View style={styles.controls} >
+      <Button
+        title="Start"
+        onPress={() => Alert.alert('Trip Started')}
+      />
+      <Button
+      title="Pause"
+      onPress={() => Alert.alert('Trip Paused')}
+      />  
+      <Button
+      title="Stop"
+      onPress={() => Alert.alert('Trip Completed')}
+      />
+      </View>
     </View>
   );
 }
@@ -20,6 +32,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  controls: {
+    width: "80%",
+    flexDirection: 'row',
+    justifyContent: "space-between",
+  },
   title: {
     fontSize: 20,
     fontWeight: 'bold',

Ejectable/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true
+    "strict": false
   }
 }