From 4e23b86fd2abe2b6ef0f0f7d033024493562a05a Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 19:09:56 -0500 Subject: [PATCH 01/15] Updated StopWatch.tsx file to display the time in HH:MM:SS format --- src/StopWatch.tsx | 68 ++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 64 insertions(+), 4 deletions(-) diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx index 5c7eb74..ce9c53e 100644 --- a/src/StopWatch.tsx +++ b/src/StopWatch.tsx @@ -1,8 +1,68 @@ -import { View } from 'react-native'; +import React from 'react'; +import { Text, View, StyleSheet } from 'react-native'; -export default function StopWatch() { +// Declares props that will be used by the StopWatch +type Props = { + + // Variable that keeps track of the current stopwatch count + stopWatchCount: number; + +}; + +export const StopWatch: React.FC = ({ stopWatchCount }) => { + + // Hours Count + const hours = Math.floor(stopWatchCount / (60 * 60 * 1000)).toString().padStart(2, '0'); + + // Minutes Count + const minutes = Math.floor((stopWatchCount % (60 * 60 * 1000)) / (60 * 1000)).toString().padStart(2, '0'); + + // Seconds Count + const seconds = Math.floor((stopWatchCount % (60 * 1000)) / 1000).toString().padStart(2, '0'); + + // Milliseconds Count + const milliseconds = (stopWatchCount % 1000).toString().padStart(3, '0').slice(0, 2); + return ( - + + // Display the current stopwatch time in HH:MM:SS format + + {hours} : + {minutes} : + {seconds} . + {milliseconds} + ); -} \ No newline at end of file + +}; + +// StopWatch Styles +const styles = StyleSheet.create({ + + + // StopWatch Container + stopWatchCountContainer: { + paddingTop: 100, + flexDirection: 'row', + alignItems: 'center', + }, + + // Time Text (Hours, Mins, Secs) + timeText: { + fontSize: 50, + fontWeight: '700', + width: 100, + textAlign: 'center', + color: '#383838' + }, + + // Miliseconds Text + timeTextMS: { + fontSize: 30, + fontWeight: '700', + width: 100, + textAlign: 'center', + color: '#383838' + }, +}); From a6248af44f7523860b5bbd7fcd3dbc673e2a1497 Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 19:23:28 -0500 Subject: [PATCH 02/15] Updated StopWatchButton.tsx file to display Start/Pause and Reset/Lap buttons --- src/StopWatchButton.tsx | 94 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 90 insertions(+), 4 deletions(-) diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index 8768555..f22351b 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -1,8 +1,94 @@ -import { View } from 'react-native'; +import React from 'react'; +import { Pressable, View, StyleSheet, Text } from 'react-native'; + +// Declares props that will be used by the StopWatch Buttons +type Props = { + + // Keeps track of whether stopwatch is running or not + isStopWatchRunning: boolean; + + // Function that stops time + stopTime: () => void; + + // Function that starts time + startTime: () => void; + + // Function that resets the time + resetTime: () => void; + + // Functions that adds a lap to lap-list + addLap: () => void; + +}; + +export const StopWatchButton: React.FC = ({ + + isStopWatchRunning, + stopTime, + startTime, + resetTime, + addLap, + +}) => { + + // Start/Stop button color that changes depending on state + const startStopButtonColor = isStopWatchRunning ? '#e37878' : '#57ba8d'; -export default function StopWatchButton() { return ( - + + + {/* Add lap / Reset Time Button */} + [ + { + backgroundColor: pressed ? 'lightgray' : '#383838', + marginRight: 50, + }, + styles.pressableButton, + ]} + onPress={isStopWatchRunning ? addLap : resetTime} + > + {isStopWatchRunning ? 'Lap' : 'Reset'} + + + + {/* Start/Pause Button */} + [ + { + backgroundColor: pressed ? 'lightgray' : startStopButtonColor, + }, + styles.pressableButton, + ]} + onPress={isStopWatchRunning ? stopTime : startTime} + > + {isStopWatchRunning ? 'Stop' : 'Start'} + + ); -} \ No newline at end of file + +}; + + +// StopWatch Buttons Styles +const styles = StyleSheet.create({ + + // Displays Buttons in a row + buttonsContainer: { + flexDirection: 'row', + alignItems: 'center', + marginTop: 10 + }, + + // Style for all buttons + pressableButton: { + elevation: 5, + borderRadius: 50, + width: 75, + height: 75, + alignItems: 'center', + justifyContent: 'center', + }, + +}); From 551443ef9e9032f57415fe065197b14e82d46958 Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 19:24:26 -0500 Subject: [PATCH 03/15] Created a LapList.tsx file to keep track of the laps --- src/LapList.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/LapList.tsx diff --git a/src/LapList.tsx b/src/LapList.tsx new file mode 100644 index 0000000..e69de29 From f4f6e90a2932cf5a387716846b572a4aa684b18b Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 20:16:04 -0500 Subject: [PATCH 04/15] Updated LapList.tsx and the format of the time --- src/LapList.tsx | 65 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/src/LapList.tsx b/src/LapList.tsx index e69de29..504d8cb 100644 --- a/src/LapList.tsx +++ b/src/LapList.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { FlatList, StyleSheet, Text, View } from 'react-native'; + +// Declares props that will be used by the StopWatch Buttons +type Props = { + + // List that keeps track of the laps + laps: number[]; +}; + + export const LapList: React.FC = ({ laps }) => { + const renderItem = ({ item, index }: { item: number; index: number }) => ( + + // Display the times of the laps + + {`Lap ${index + 1}: ${formatTime(item)}`} + + + ); + + // Format the time of the laps in HH:MM:SS format + const formatTime = (time: number): string => { + const hours = Math.floor(time / (1000 * 60 * 60)).toString().padStart(2, '0'); + const minutes = Math.floor(time / (1000 * 60)).toString().padStart(2, '0'); + const seconds = Math.floor((time % (1000 * 60)) / 1000).toString().padStart(2, '0'); + const milliseconds = (time % 1000).toString().padStart(3, '0').slice(0, 2); + return `${hours}:${minutes}:${seconds}.${milliseconds}`; + }; + + return ( + + + // List of the Laps using FlatList + + index.toString()} + style={styles.lapList} + /> + + ); + + }; + + // LapList Styles + const styles = StyleSheet.create({ + lapListContainer: { + marginTop: 10, + flex: 1, + width: '100%', + + }, + + lapList: { + width: '100%', + }, + + lapItem: { + padding: 10, + borderBottomWidth: 1, + borderBottomColor: '#ccc', + }, + +}); \ No newline at end of file From e54fa1570c20d18cad77d360a2c8b07d6004e612 Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 20:16:59 -0500 Subject: [PATCH 05/15] Updated StopWatchButtons to display color --- src/StopWatchButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index f22351b..1f47fe8 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -62,7 +62,7 @@ export const StopWatchButton: React.FC = ({ ]} onPress={isStopWatchRunning ? stopTime : startTime} > - {isStopWatchRunning ? 'Stop' : 'Start'} + {isStopWatchRunning ? 'Pause' : 'Start'} From b93310628219f0270a40c9a128550afb3dd91eff Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 20:17:35 -0500 Subject: [PATCH 06/15] Updated format of StopWatch --- src/StopWatch.tsx | 56 +++++++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx index ce9c53e..3de8b34 100644 --- a/src/StopWatch.tsx +++ b/src/StopWatch.tsx @@ -3,47 +3,42 @@ import { Text, View, StyleSheet } from 'react-native'; // Declares props that will be used by the StopWatch type Props = { - // Variable that keeps track of the current stopwatch count - stopWatchCount: number; - + stopWatchCount: number; }; export const StopWatch: React.FC = ({ stopWatchCount }) => { - // Hours Count - const hours = Math.floor(stopWatchCount / (60 * 60 * 1000)).toString().padStart(2, '0'); - + const hours = Math.floor(stopWatchCount / (60 * 60 * 1000)).toString().padStart(2, '0'); + // Minutes Count - const minutes = Math.floor((stopWatchCount % (60 * 60 * 1000)) / (60 * 1000)).toString().padStart(2, '0'); - + const minutes = Math.floor((stopWatchCount % (60 * 60 * 1000)) / (60 * 1000)).toString().padStart(2, '0'); + // Seconds Count - const seconds = Math.floor((stopWatchCount % (60 * 1000)) / 1000).toString().padStart(2, '0'); + const seconds = Math.floor((stopWatchCount % (60 * 1000)) / 1000).toString().padStart(2, '0'); // Milliseconds Count - const milliseconds = (stopWatchCount % 1000).toString().padStart(3, '0').slice(0, 2); - - return ( + const milliseconds = (stopWatchCount % 1000).toString().padStart(3, '0').slice(0, 2); + return ( // Display the current stopwatch time in HH:MM:SS format - {hours} : - {minutes} : - {seconds} . + {hours} + : + {minutes} + : + {seconds} + . {milliseconds} - ); - }; // StopWatch Styles const styles = StyleSheet.create({ - - // StopWatch Container stopWatchCountContainer: { - paddingTop: 100, + paddingTop: 100, flexDirection: 'row', alignItems: 'center', }, @@ -52,17 +47,26 @@ const styles = StyleSheet.create({ timeText: { fontSize: 50, fontWeight: '700', - width: 100, + width: 70, // Adjusted width for better spacing textAlign: 'center', - color: '#383838' + color: '#383838', + }, + + // Separator + separator: { + fontSize: 50, + fontWeight: '700', + color: '#383838', }, // Miliseconds Text timeTextMS: { - fontSize: 30, + fontSize: 20, fontWeight: '700', - width: 100, + width: 30, // Adjusted width for better spacing textAlign: 'center', - color: '#383838' + color: '#383838', + marginTop: 10 }, -}); + +}); \ No newline at end of file From f02b1a014a7b444d266d1336cbdd20b563a21503 Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 20:23:29 -0500 Subject: [PATCH 07/15] Added all the components and states to the App --- App.tsx | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 55 insertions(+), 3 deletions(-) diff --git a/App.tsx b/App.tsx index 0329d0c..82bae26 100644 --- a/App.tsx +++ b/App.tsx @@ -1,11 +1,63 @@ +import React, { useState, useEffect } from 'react'; import { StatusBar } from 'expo-status-bar'; -import { StyleSheet, Text, View } from 'react-native'; +import { StyleSheet, View } from 'react-native'; +import { StopWatch } from './src/StopWatch'; +import { StopWatchButton } from './src/StopWatchButton'; +import { LapList } from './src/LapList'; // Import the LapList component + +const CURRENT_TIME = 0; export default function App() { + const [timeCount, setTimeCount] = useState(CURRENT_TIME); + const [timeInterval, setTimeInterval] = useState(null); + const [isStopWatchRunning, setIsStopWatchRunning] = useState(false); + const [laps, setLaps] = useState([]); + + const startTime = () => { + setIsStopWatchRunning(true); + + const id = setInterval(() => setTimeCount((prev) => prev + 10), 10); + setTimeInterval(id); + }; + + const stopTime = () => { + if (timeInterval !== null) { + clearInterval(timeInterval); + setTimeInterval(null); + } + setIsStopWatchRunning(false); + }; + + const resetTime = () => { + setTimeCount(0); + setLaps([]); // Clear laps when resetting + }; + + const addLap = () => { + setLaps((prevLaps) => [...prevLaps, timeCount]); + }; + + useEffect(() => { + return () => { + if (timeInterval !== null) { + clearInterval(timeInterval); + setTimeInterval(null); + } + }; + }, [timeInterval]); + return ( - Open up App.tsx to start working on your app! + + + ); } @@ -17,4 +69,4 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, -}); +}); \ No newline at end of file From 33fbac915aa7d1f54398379755297998daa8a3b7 Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 20:24:35 -0500 Subject: [PATCH 08/15] Used performance.now for more accurate time --- App.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/App.tsx b/App.tsx index 82bae26..4b1802f 100644 --- a/App.tsx +++ b/App.tsx @@ -15,9 +15,15 @@ export default function App() { const startTime = () => { setIsStopWatchRunning(true); + const startTimeStamp = performance.now(); - const id = setInterval(() => setTimeCount((prev) => prev + 10), 10); - setTimeInterval(id); + const id = setInterval(() => { + const currentTimeStamp = performance.now(); + const elapsedTime = currentTimeStamp - startTimeStamp; + setTimeCount(Math.floor(elapsedTime)); // Using Math.floor for a whole number representation + }, + 10); + setTimeInterval(id); }; const stopTime = () => { From 4d5745b9550d1e0eb84fcf72db928b3b58b931d1 Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 20:31:10 -0500 Subject: [PATCH 09/15] Reversed the laplist --- src/LapList.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/LapList.tsx b/src/LapList.tsx index 504d8cb..9c47e05 100644 --- a/src/LapList.tsx +++ b/src/LapList.tsx @@ -9,11 +9,12 @@ type Props = { }; export const LapList: React.FC = ({ laps }) => { + const reversedLaps = [...laps].reverse(); const renderItem = ({ item, index }: { item: number; index: number }) => ( // Display the times of the laps - {`Lap ${index + 1}: ${formatTime(item)}`} + {`Lap ${reversedLaps.length - index}: ${formatTime(item)}`} ); @@ -33,7 +34,7 @@ type Props = { // List of the Laps using FlatList index.toString()} style={styles.lapList} From e73719186acd612623c052dde302a37dc1cd6bac Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 20:32:07 -0500 Subject: [PATCH 10/15] added node --- tsconfig.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index a7b94da..8508b3d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,10 @@ { "extends": "@tsconfig/react-native/tsconfig.json", "compilerOptions": { - "strict": true + "strict": true, + "outDir": "../build/app", + "module": "esnext", + "baseUrl": "", + "types": ["node"] } } From 10e5c165c469d339380f4b82e3e76c556193c02b Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 20:43:46 -0500 Subject: [PATCH 11/15] Added comments to the file --- App.tsx | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/App.tsx b/App.tsx index 4b1802f..19e725f 100644 --- a/App.tsx +++ b/App.tsx @@ -3,29 +3,37 @@ import { StatusBar } from 'expo-status-bar'; import { StyleSheet, View } from 'react-native'; import { StopWatch } from './src/StopWatch'; import { StopWatchButton } from './src/StopWatchButton'; -import { LapList } from './src/LapList'; // Import the LapList component +import { LapList } from './src/LapList'; const CURRENT_TIME = 0; export default function App() { + + // States that keep track of the time const [timeCount, setTimeCount] = useState(CURRENT_TIME); const [timeInterval, setTimeInterval] = useState(null); const [isStopWatchRunning, setIsStopWatchRunning] = useState(false); const [laps, setLaps] = useState([]); + + // Start Time Function const startTime = () => { setIsStopWatchRunning(true); - const startTimeStamp = performance.now(); + const startTimeStamp = performance.now(); - const id = setInterval(() => { - const currentTimeStamp = performance.now(); - const elapsedTime = currentTimeStamp - startTimeStamp; - setTimeCount(Math.floor(elapsedTime)); // Using Math.floor for a whole number representation + const id = setInterval(() => { + const currentTimeStamp = performance.now(); + const elapsedTime = currentTimeStamp - startTimeStamp; + setTimeCount(Math.floor(elapsedTime)); }, - 10); - setTimeInterval(id); + + 10); + setTimeInterval(id); + }; + + // Stop Time Function const stopTime = () => { if (timeInterval !== null) { clearInterval(timeInterval); @@ -34,11 +42,13 @@ export default function App() { setIsStopWatchRunning(false); }; + // Reset Time Function const resetTime = () => { setTimeCount(0); - setLaps([]); // Clear laps when resetting + setLaps([]); }; + // Add Lap Function const addLap = () => { setLaps((prevLaps) => [...prevLaps, timeCount]); }; @@ -75,4 +85,5 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + }); \ No newline at end of file From 6090ecfff4980b4f48f98cf88a0be178a147c6e4 Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 20:46:35 -0500 Subject: [PATCH 12/15] Updated StopWatchButton.tsx Stop button --- src/StopWatchButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index 1f47fe8..f22351b 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -62,7 +62,7 @@ export const StopWatchButton: React.FC = ({ ]} onPress={isStopWatchRunning ? stopTime : startTime} > - {isStopWatchRunning ? 'Pause' : 'Start'} + {isStopWatchRunning ? 'Stop' : 'Start'} From ece026010a8c1a1762cf95757a2c73ef683f2ae7 Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 21:05:08 -0500 Subject: [PATCH 13/15] Updated the layout of the list, increased font size, adjusted padding, and decreased font weight --- src/LapList.tsx | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/LapList.tsx b/src/LapList.tsx index 9c47e05..aec1f2b 100644 --- a/src/LapList.tsx +++ b/src/LapList.tsx @@ -10,14 +10,13 @@ type Props = { export const LapList: React.FC = ({ laps }) => { const reversedLaps = [...laps].reverse(); + const renderItem = ({ item, index }: { item: number; index: number }) => ( - - // Display the times of the laps - - {`Lap ${reversedLaps.length - index}: ${formatTime(item)}`} - - - ); + + {`Lap ${reversedLaps.length - index}:`} + {formatTime(item)} + + ); // Format the time of the laps in HH:MM:SS format const formatTime = (time: number): string => { @@ -59,8 +58,21 @@ type Props = { lapItem: { padding: 10, + flexDirection: 'row', // Use row layout to align lap number and time horizontally + justifyContent: 'space-between', borderBottomWidth: 1, borderBottomColor: '#ccc', + }, + lapItemText: { + fontWeight: '300', + paddingLeft: 20, + paddingRight: 20, + color: '#383838', + fontSize: 20, + + + }, + }); \ No newline at end of file From 0caa1018b610f043e8ce24d277e13a8377fd3d14 Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 21:20:42 -0500 Subject: [PATCH 14/15] Fixed paused time issue. --- App.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/App.tsx b/App.tsx index 19e725f..4c662ea 100644 --- a/App.tsx +++ b/App.tsx @@ -19,15 +19,17 @@ export default function App() { // Start Time Function const startTime = () => { setIsStopWatchRunning(true); - const startTimeStamp = performance.now(); + + // Calculate the initial elapsed time when starting + const startTimeStamp = performance.now() - timeCount; const id = setInterval(() => { - const currentTimeStamp = performance.now(); - const elapsedTime = currentTimeStamp - startTimeStamp; - setTimeCount(Math.floor(elapsedTime)); - }, - - 10); + + const currentTimeStamp = performance.now(); + const elapsedTime = currentTimeStamp - startTimeStamp; + setTimeCount(Math.floor(elapsedTime)); + + }, 10); setTimeInterval(id); }; From 92287b2a0d4ba60401db0ebdc20825cb4330339f Mon Sep 17 00:00:00 2001 From: sanya Date: Mon, 29 Jan 2024 21:22:01 -0500 Subject: [PATCH 15/15] Final Changes for Buttons --- src/StopWatchButton.tsx | 182 ++++++++++++++++++++-------------------- 1 file changed, 93 insertions(+), 89 deletions(-) diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index f22351b..74e0313 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -2,93 +2,97 @@ import React from 'react'; import { Pressable, View, StyleSheet, Text } from 'react-native'; // Declares props that will be used by the StopWatch Buttons -type Props = { - - // Keeps track of whether stopwatch is running or not - isStopWatchRunning: boolean; - - // Function that stops time - stopTime: () => void; - - // Function that starts time - startTime: () => void; - - // Function that resets the time - resetTime: () => void; - - // Functions that adds a lap to lap-list - addLap: () => void; - -}; - -export const StopWatchButton: React.FC = ({ - - isStopWatchRunning, - stopTime, - startTime, - resetTime, - addLap, - -}) => { - - // Start/Stop button color that changes depending on state - const startStopButtonColor = isStopWatchRunning ? '#e37878' : '#57ba8d'; - - return ( - + type Props = { + + // Keeps track of whether stopwatch is running or not + isStopWatchRunning: boolean; + + // Function that stops time + stopTime: () => void; + + // Function that starts time + startTime: () => void; + + // Function that resets the time + resetTime: () => void; + + // Functions that add a lap to lap-list + addLap: () => void; + + }; + + export const StopWatchButton: React.FC = ({ + isStopWatchRunning, + stopTime, + startTime, + resetTime, + addLap, + }) => { + + // Start/Stop button color that changes depending on state + const startStopButtonColor = isStopWatchRunning ? '#e37878' : '#57ba8d'; + + return ( + + + {/* Add lap / Reset Time Button */} + [ + { + backgroundColor: pressed ? 'lightgray' : '#383838', + marginRight: 50, + }, + styles.pressableButton, + ]} + onPress={isStopWatchRunning ? addLap : resetTime} + > + {isStopWatchRunning ? 'Lap' : 'Reset'} + + + {/* Start/Pause Button */} + [ + { + backgroundColor: pressed ? 'lightgray' : startStopButtonColor, + }, + styles.pressableButton, + ]} + onPress={isStopWatchRunning ? stopTime : startTime} + > + {isStopWatchRunning ? 'Stop' : 'Start'} + + - {/* Add lap / Reset Time Button */} - [ - { - backgroundColor: pressed ? 'lightgray' : '#383838', - marginRight: 50, - }, - styles.pressableButton, - ]} - onPress={isStopWatchRunning ? addLap : resetTime} - > - {isStopWatchRunning ? 'Lap' : 'Reset'} - - - - {/* Start/Pause Button */} - [ - { - backgroundColor: pressed ? 'lightgray' : startStopButtonColor, - }, - styles.pressableButton, - ]} - onPress={isStopWatchRunning ? stopTime : startTime} - > - {isStopWatchRunning ? 'Stop' : 'Start'} - - - - ); - -}; - - -// StopWatch Buttons Styles -const styles = StyleSheet.create({ - - // Displays Buttons in a row - buttonsContainer: { - flexDirection: 'row', - alignItems: 'center', - marginTop: 10 - }, - - // Style for all buttons - pressableButton: { - elevation: 5, - borderRadius: 50, - width: 75, - height: 75, - alignItems: 'center', - justifyContent: 'center', - }, - -}); + ); + }; + + + // StopWatch Buttons Styles + const styles = StyleSheet.create({ + + // Displays Buttons in a row + buttonsContainer: { + flexDirection: 'row', + alignItems: 'center', + marginTop: 10, + }, + + // Style for all buttons + pressableButton: { + elevation: 5, + borderRadius: 50, + width: 75, + height: 75, + alignItems: 'center', + justifyContent: 'center', + }, + + // Text style for buttons + buttonText: { + color: 'white', + fontSize: 20, + fontWeight: '400', + }, + + + }); \ No newline at end of file