fullscreen.patch

diff --git a/src/app/index.tsx b/src/app/index.tsx
index 09075a6..65631f9 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -83,6 +83,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
+    paddingTop: 50, // Add top padding for safe area
   },
   topHalf: {
     flex: 1,
@@ -90,6 +91,7 @@ const styles = StyleSheet.create({
   },
   intervalList: {
     flex: 1,
+    paddingBottom: 10, // Add bottom padding for better spacing
   },
   addButton: {
     backgroundColor: '#2196F3',
diff --git a/src/components/Timer.tsx b/src/components/Timer.tsx
index 59fad17..c1519c5 100644
--- a/src/components/Timer.tsx
+++ b/src/components/Timer.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Modal, Dimensions } from 'react-native';
 
 interface TimerProps {
   minutes: number;
@@ -9,6 +9,7 @@ interface TimerProps {
 export function Timer({ minutes, onComplete }: TimerProps) {
   const [timeLeft, setTimeLeft] = useState(minutes * 60);
   const [isRunning, setIsRunning] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
   useEffect(() => {
     let interval: NodeJS.Timeout;
@@ -44,13 +45,32 @@ export function Timer({ minutes, onComplete }: TimerProps) {
     return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
   };
 
-  return (
-    <View style={styles.container}>
-      <Text style={styles.time}>{formatTime(timeLeft)}</Text>
+  const handleStartPress = () => {
+    setIsRunning(!isRunning);
+    if (!isRunning) {
+      setIsFullscreen(true);
+    }
+  };
+
+  const TimerContent = ({ containerStyle = {}, showExitButton = false }) => (
+    <View style={[styles.container, containerStyle]}>
+      {showExitButton && (
+        <TouchableOpacity
+          style={styles.exitButton}
+          onPress={() => {
+            setIsFullscreen(false);
+          }}
+        >
+          <Text style={styles.exitButtonText}>✕</Text>
+        </TouchableOpacity>
+      )}
+      <Text style={[styles.time, showExitButton && styles.fullscreenTime]}>
+        {formatTime(timeLeft)}
+      </Text>
       <View style={styles.buttonContainer}>
         <TouchableOpacity
           style={[styles.button, isRunning ? styles.stopButton : styles.startButton]}
-          onPress={() => setIsRunning(!isRunning)}
+          onPress={handleStartPress}
         >
           <Text style={styles.buttonText}>
             {isRunning ? 'Stop' : 'Start'}
@@ -61,6 +81,7 @@ export function Timer({ minutes, onComplete }: TimerProps) {
           onPress={() => {
             setTimeLeft(minutes * 60);
             setIsRunning(false);
+            setIsFullscreen(false);
           }}
         >
           <Text style={styles.buttonText}>Reset</Text>
@@ -68,6 +89,23 @@ export function Timer({ minutes, onComplete }: TimerProps) {
       </View>
     </View>
   );
+
+  return (
+    <>
+      <TimerContent />
+      <Modal
+        visible={isFullscreen}
+        animationType="fade"
+        transparent={false}
+        onRequestClose={() => setIsFullscreen(false)}
+      >
+        <TimerContent
+          containerStyle={styles.fullscreenContainer}
+          showExitButton={true}
+        />
+      </Modal>
+    </>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -76,11 +114,20 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     padding: 20,
   },
+  fullscreenContainer: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   time: {
     fontSize: 72,
     fontWeight: 'bold',
     marginBottom: 20,
   },
+  fullscreenTime: {
+    fontSize: 120,
+  },
   buttonContainer: {
     flexDirection: 'row',
     justifyContent: 'center',
@@ -107,4 +154,21 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: 'bold',
   },
+  exitButton: {
+    position: 'absolute',
+    top: 40,
+    right: 20,
+    backgroundColor: '#ff4444',
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1000,
+  },
+  exitButtonText: {
+    color: 'white',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
 });
\ No newline at end of file