Created defense timer for teleop

app/auto.tsx

@@ -5,13 +5,15 @@ import NavButton from './components/NavButton';
 import ReefAlgaeView from './views/ReefAlgaeView';
 import AutoStartPositionView from './views/AutoStartPositionView'
 import AlgaeView from './views/AlgaeView';
+import React from 'react';
 
 export default function App() {
     return (
-        <View style={styles.container} onTouchStart={Keyboard.dismiss}>
+        <View style={styles.container}>
+
             <PageHeader title='Auto' pageNumber='2/4' previous='' />
+
             <ScrollView>
-
             <AutoStartPositionView/>
 
             <ReefAlgaeView phase="autonomous" />

app/components/Timer.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useRef } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { Button } from 'react-native-paper';  
+
+function Stopwatch() {
+    const [time, setTime] = useState(0);
+    const [isRunning, setIsRunning] = useState(false);
+    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+    const startStop = () => {
+        if (isRunning) {
+            if (intervalRef.current) clearInterval(intervalRef.current);
+        } else {
+            intervalRef.current = setInterval(() => {
+                setTime((prevTime: number) => prevTime + 10);
+            }, 10);
+        }
+
+        setIsRunning(!isRunning);
+    };
+
+
+    const reset = () => {
+        if (intervalRef.current) clearInterval(intervalRef.current);
+        setTime(0);
+        setIsRunning(false);
+    };
+
+
+    const formatTime = (ms: number) => {
+        const minutes = Math.floor(ms / 60000);
+        const seconds = Math.floor((ms % 60000) / 1000);
+        const milliseconds = ms % 1000;
+        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${milliseconds.toString().padStart(3, '0')}`;
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.time}>{formatTime(time)}</Text>
+            <View style={styles.buttons}>
+                <Button mode="contained" onPress={startStop}>
+                    {isRunning ? 'Stop' : 'Start'}
+                </Button>
+                <Button mode="outlined" onPress={reset}>
+                    Reset
+                </Button>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 20,
+  },
+  time: {
+    fontSize: 15,
+    marginBottom: 10,
+  },
+  buttons: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+});
+
+export default Stopwatch;

app/index.tsx

@@ -5,7 +5,7 @@ import PageHeader from './components/Header';
 import LabeledTextInput from './components/LabeledTextInput';
 import { getMatchData, updateMatchNumber, updateName, updateTeamNumber, updateDriverStation } from './api/data';
 import { DRIVER_STATION } from './api/data_types';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import RadioButton from './components/RadioButton';
 
 export default function App() {
@@ -29,6 +29,7 @@ export default function App() {
         <View style={styles.container} onTouchStart={Keyboard.dismiss}>
             <PageHeader title='Main' pageNumber='1/4' showTeam={false} />
             <ScrollView>
+
             <LabeledTextInput label="Name" editable={true} submit={(e) => {
                 updateName(e.nativeEvent.text);
                 setNameFilled(e.nativeEvent.text !== "");

app/teleop.tsx

@@ -5,16 +5,22 @@ import ReefAlgaeView from './views/ReefAlgaeView';
 import EndgameView from './views/EndgameView';
 import PageHeader from './components/Header';
 import AlgaeView from './views/AlgaeView';
+import Stopwatch from './components/Timer';
+import { Divider } from 'react-native-paper';
 
 export default function App() {
     return (
         <View style={styles.container} onTouchStart={Keyboard.dismiss}>
             <PageHeader title='Teleop' pageNumber='3/4' previous="auto" />
             <ScrollView>
 
+            <Stopwatch/>
+            <Divider />
+
             <ReefAlgaeView phase="teleop" />
             <AlgaeView phase="teleop" />
             <EndgameView/>
+
 
 
             <StatusBar style="auto" />