// App.js
import React, { useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const App = () => {
const [seconds, setSeconds] = useState(0);
const [isActive, setIsActive] = useState(false);
useEffect(() => {
let timer;
if (isActive) {
timer = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);
} else if (!isActive && seconds !== 0) {
clearInterval(timer);
}
return () => clearInterval(timer);
}, [isActive, seconds]);
const handleStart = () => setIsActive(true);
const handlePause = () => setIsActive(false);
const handleReset = () => {
setIsActive(false);
setSeconds(0);
};
return (
<View style={styles.container}>
<Text style={styles.timer}>
{Math.floor(seconds / 3600)}:
{Math.floor((seconds % 3600) / 60)}:
{seconds % 60}
</Text>
<View style={styles.buttonContainer}>
<Button title={isActive ? "Pause" : "Start"} onPress={isActive ? handlePause : handleStart} />
<Button title="Reset" onPress={handleReset} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
timer: {
fontSize: 48,
marginBottom: 20,
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '80%',
},
});
export default App;
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.