feat: add simple bell audio a state changement

app/timer.tsx

@@ -6,6 +6,8 @@ import styled from '@emotion/native';
 import TimerContent from '@/components/useCases/timer/view/TimerContent';
 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';
 
 interface TimerProps {
   reps: number;
@@ -22,6 +24,7 @@ export default function Timer() {
   const [isWorkPhase, setIsWorkPhase] = useState<boolean>(true);
   const [isRunning, setIsRunning] = useState<boolean>(false);
   const [isFinish, setIsFinish] = useState<boolean>(false);
+  const [sound, setSound] = useState<Sound>();
 
   useEffect(() => {
     handleStart();
@@ -38,10 +41,12 @@ export default function Timer() {
       if (currentRep < reps) {
         if (isWorkPhase) {
           // If the work phase is over, move on to the rest phase
+          playSound()
           setIsWorkPhase(false);
           setTimeLeft(restTime);
         } else {
           // If the rest phase is complete, move on to the next work phase
+          playSound()
           setIsWorkPhase(true);
           setTimeLeft(workTime);
           setCurrentRep(currentRep + 1);
@@ -64,6 +69,35 @@ export default function Timer() {
     setIsFinish(false);
   };
 
+  async function configureAudio() {
+    await Audio.setAudioModeAsync({
+      allowsRecordingIOS: false,
+      staysActiveInBackground: false,
+      playsInSilentModeIOS: true,
+      shouldDuckAndroid: true,
+      playThroughEarpieceAndroid: false,
+    });
+  }
+
+  useEffect(() => {
+    configureAudio();
+  }, []);
+
+  async function playSound() {
+    const { sound } = await Audio.Sound.createAsync(require('../assets/audios/boxingBell.mp3'));
+    setSound(sound);
+
+    await sound.playAsync();
+  }
+
+  useEffect(() => {
+    return sound
+      ? () => {
+          sound.unloadAsync();
+        }
+      : undefined;
+  }, [sound]);
+
   const handleContine = () => {
     setIsRunning(true);
   };

package-lock.json

@@ -15,6 +15,7 @@
         "@react-navigation/native": "^6.0.2",
         "@testing-library/react-native": "^12.7.2",
         "expo": "~51.0.28",
+        "expo-av": "~14.0.7",
         "expo-font": "~12.0.9",
         "expo-linking": "~6.3.1",
         "expo-router": "~3.5.23",
@@ -11869,6 +11870,15 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-av": {
+      "version": "14.0.7",
+      "resolved": "https://registry.npmjs.org/expo-av/-/expo-av-14.0.7.tgz",
+      "integrity": "sha512-FvKZxyy+2/qcCmp+e1GTK3s4zH8ZO1RfjpqNxh7ARlS1oH8HPtk1AyZAMo52tHz3yQ3UIqxQ2YbI9CFb4065lA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-constants": {
       "version": "16.0.2",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-16.0.2.tgz",

package.json

@@ -45,9 +45,9 @@
     "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"
+    "react-native-web": "~0.19.10",
+    "expo-av": "~14.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",