diff --git a/Ejectable/App.tsx b/Ejectable/App.tsx index 96a689d6..cf33a65d 100644 --- a/Ejectable/App.tsx +++ b/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; diff --git a/Ejectable/components/EditScreenInfo.tsx b/Ejectable/components/EditScreenInfo.tsx deleted file mode 100644 index 3f1d72c2..00000000 --- a/Ejectable/components/EditScreenInfo.tsx +++ /dev/null @@ -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 ( - - - - Open up the code for this screen: - - - - {path} - - - - Change any of the text, save the file, and your app will automatically update. - - - - - - - Tap here if your app doesn't automatically update after making changes - - - - - ); -} - -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', - }, -}); diff --git a/Ejectable/components/SettingsScreenInfo.tsx b/Ejectable/components/SettingsScreenInfo.tsx new file mode 100644 index 00000000..ff086a26 --- /dev/null +++ b/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 ( + + + Toggle km/mi, set CO2/ea + + + + ); +} + +const styles = StyleSheet.create({ + settingsContainer: { + marginHorizontal: 50, + }, + settingsText: { + fontSize: 17, + lineHeight: 24, + textAlign: 'center', + }, + +}); diff --git a/Ejectable/screens/SettingsScreen.tsx b/Ejectable/screens/SettingsScreen.tsx index 351f2d3c..60b2c605 100644 --- a/Ejectable/screens/SettingsScreen.tsx +++ b/Ejectable/screens/SettingsScreen.tsx @@ -1,15 +1,36 @@ import * as React from 'react'; -import { StyleSheet } from 'react-native'; - -import EditScreenInfo from '../components/EditScreenInfo'; +import { StyleSheet, Switch, TextInput } from 'react-native'; 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 ( Model Settings - + + + + ); } @@ -29,4 +50,10 @@ const styles = StyleSheet.create({ height: 1, width: '80%', }, + input: { + height: 40, + margin: 12, + borderWidth: 1, + padding: 10, + }, }); diff --git a/Ejectable/screens/TripScreen.tsx b/Ejectable/screens/TripScreen.tsx index 7e7e53f0..e456630b 100644 --- a/Ejectable/screens/TripScreen.tsx +++ b/Ejectable/screens/TripScreen.tsx @@ -1,7 +1,5 @@ import * as React from 'react'; -import { StyleSheet } from 'react-native'; - -import EditScreenInfo from '../components/EditScreenInfo'; +import { Button, StyleSheet, Alert } from 'react-native'; import { Text, View } from '../components/Themed'; export default function TripScreen() { @@ -9,7 +7,21 @@ export default function TripScreen() { Trip Control - + + +