Add some more stuff

package.json

@@ -18,6 +18,8 @@
     "react-native-pager-view": "^6.1.4",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "^3.20.0",
+    "react-native-sound": "^0.11.2",
+    "react-native-sound-player": "^0.13.2",
     "react-native-svg": "13.4.0",
     "react-native-tab-view": "^3.5.0",
     "styled-components": "^5.3.6"

src/components/Ring.js

@@ -9,18 +9,25 @@ import {
 } from "react-native";
 import { SvgXml } from "react-native-svg";
 
-export const Ring = () => {
+export const Ring = ({ safe, setRingPlease }) => {
   const [ring, setRing] = useState(false);
+  setRingPlease(ring);
 
   return (
     <View style={styles.ringContainer}>
-      <Text style={styles.ringText}>
-        {ring ? "Your phone is ringing" : "Your phone is not ringing"}
-      </Text>
+      {safe ? (
+        <Text style={styles.safeText}>We marked you as safe!</Text>
+      ) : (
+        <>
+          <Text style={styles.ringText}>
+            {ring ? "Your phone is ringing" : "Your phone is not ringing"}
+          </Text>
 
-      <TouchableOpacity onPress={() => setRing(!ring)}>
-        <SvgXml xml={ring ? unmuted : muted} width={42} height={42} />
-      </TouchableOpacity>
+          <TouchableOpacity onPress={() => setRing(!ring)}>
+            <SvgXml xml={ring ? unmuted : muted} width={42} height={42} />
+          </TouchableOpacity>
+        </>
+      )}
     </View>
   );
 };
@@ -64,4 +71,12 @@ const styles = StyleSheet.create({
     bottom: 5,
     flexGrow: 1,
   },
+  safeText: {
+    fontSize: 15,
+    color: "#fff",
+    fontWeight: "bold",
+    bottom: 5,
+    flexGrow: 1,
+    paddingBottom: 40,
+  },
 });

src/screens/WarningPage.js

@@ -9,8 +9,6 @@ import {
 import { Progress } from "../components/Progress";
 import { Ring } from "../components/Ring";
 
-import Timer from "../components/Timer";
-
 const steps = [
   {
     number: 1,
@@ -28,6 +26,7 @@ const time = "2:59";
 
 export const WarningPage = () => {
   const [safe, setSafe] = useState(false);
+  const [ring, setRing] = useState(false);
   const [timeout, setTimeout] = useState(false);
 
   return (
@@ -70,7 +69,11 @@ export const WarningPage = () => {
             })}
           </View>
 
-          {timeout ? <Ring /> : <Progress setTimeout={setTimeout} />}
+          {timeout ? (
+            <Ring safe={safe} setRingPlease={setRing} />
+          ) : (
+            <Progress setTimeout={setTimeout} />
+          )}
 
           <TouchableOpacity onPress={() => setSafe(!safe)}>
             <View