feat: add keep screen awake when timer is running

app/timer.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useRoute } from '@react-navigation/native';
+import { useRoute, useNavigation } from '@react-navigation/native';
 
 import { View } from '@/components/shared/Themed';
 import styled from '@emotion/native';
@@ -8,6 +8,7 @@ import FinishContent from '@/components/useCases/timer/view/FinishContent';
 import { TimerBgColor } from '@/components/useCases/timer/business/type';
 import { Audio } from 'expo-av';
 import { Sound } from 'expo-av/build/Audio';
+import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
 
 interface TimerProps {
   reps: number;
@@ -16,9 +17,10 @@ interface TimerProps {
 }
 
 export default function Timer() {
+  const navigation = useNavigation();
   const route = useRoute();
-  const { reps, restTime, workTime } = route.params as TimerProps;
 
+  const { reps, restTime, workTime } = route.params as TimerProps;
   const [currentRep, setCurrentRep] = useState<number>(0);
   const [timeLeft, setTimeLeft] = useState<number>(0);
   const [isWorkPhase, setIsWorkPhase] = useState<boolean>(true);
@@ -27,9 +29,20 @@ export default function Timer() {
   const [sound, setSound] = useState<Sound>();
 
   useEffect(() => {
+    configureAudio();
     handleStart();
+    activateKeepAwakeAsync();
   }, []);
 
+  // when the user exits the screen, desactivate the keepAwake
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('beforeRemove', (_) => {
+      deactivateKeepAwake();
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
   useEffect(() => {
     let timer: NodeJS.Timeout;
 
@@ -53,6 +66,7 @@ export default function Timer() {
         }
       } else {
         // Done
+        playSound();
         setIsRunning(false);
         setIsFinish(true);
       }
@@ -79,10 +93,6 @@ export default function Timer() {
     });
   }
 
-  useEffect(() => {
-    configureAudio();
-  }, []);
-
   async function playSound() {
     const { sound } = await Audio.Sound.createAsync(require('../assets/audios/boxingBell.mp3'));
     setSound(sound);

package-lock.json

@@ -17,6 +17,7 @@
         "expo": "~51.0.28",
         "expo-av": "~14.0.7",
         "expo-font": "~12.0.9",
+        "expo-keep-awake": "~13.0.2",
         "expo-linking": "~6.3.1",
         "expo-router": "~3.5.23",
         "expo-splash-screen": "~0.27.5",
@@ -30,7 +31,6 @@
         "react-native-reanimated": "~3.10.1",
         "react-native-safe-area-context": "4.10.5",
         "react-native-screens": "3.31.1",
-        "react-native-sound": "^0.11.2",
         "react-native-timer-picker": "^1.10.3",
         "react-native-web": "~0.19.10"
       },
@@ -19637,15 +19637,6 @@
         "react-native": "*"
       }
     },
-    "node_modules/react-native-sound": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/react-native-sound/-/react-native-sound-0.11.2.tgz",
-      "integrity": "sha512-LmGc8lgOK3qecYMVQpyHvww/C+wgT6sWeMpVbOe4NCRGC2yKd4fo4U0KBUo9PO7AqKESO3I/2GZg1/C0+bwiiA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react-native": ">=0.8.0"
-      }
-    },
     "node_modules/react-native-timer-picker": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/react-native-timer-picker/-/react-native-timer-picker-1.10.3.tgz",

package.json

@@ -47,7 +47,8 @@
     "react-native-screens": "3.31.1",
     "react-native-timer-picker": "^1.10.3",
     "react-native-web": "~0.19.10",
-    "expo-av": "~14.0.7"
+    "expo-av": "~14.0.7",
+    "expo-keep-awake": "~13.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",