speechtherapy text highlight

App/Frontend/ReadME.md

 ## Install instructions
-nmp install expo
+npm install expo
+npm install react-native
 npm install react-navigation
 npm install @expo/vector-icons
 expo install react-native-gesture-handler react-native-reanimated
+expo install expo-screen-orientation
 
 
 

App/Frontend/package.json

@@ -14,10 +14,12 @@
     "@react-navigation/stack": "^6.3.16",
     "expo": "~48.0.9",
     "expo-av": "^13.2.1",
+    "expo-screen-orientation": "~5.1.1",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
-    "react-native": "0.71.4",
+    "react-native": "^0.71.4",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-orientation-locker": "^1.5.0",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",

App/Frontend/screens/SpeechTherapyScreen.js

-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { Audio } from 'expo-av';
+import * as ScreenOrientation from 'expo-screen-orientation';
+
+const SpeechTherapyScreen = () => {
+  const [sound, setSound] = useState(null);
+  const [progress, setProgress] = useState(0);
+
+  const text = "i go to school";
+  const audioPath = './assets/CG/content/school_sentence.m4a';
+
+  useEffect(() => {
+    async function changeScreenOrientation() {
+      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
+    }
+
+    changeScreenOrientation();
+
+    return async () => {
+      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
+    };
+  }, []);
+
+  useEffect(() => {
+    async function playAudio() {
+      const { sound } = await Audio.Sound.createAsync(
+        require(audioPath),
+        {},
+        updatePlaybackStatus,
+      );
+      setSound(sound);
+      await sound.playAsync();
+    }
+
+    playAudio();
+
+    return () => {
+      if (sound) {
+        sound.unloadAsync();
+      }
+    };
+  }, []);
+
+  const updatePlaybackStatus = (status) => {
+    if (status.isLoaded) {
+      setProgress(status.positionMillis / status.durationMillis);
+    }
+  };
+
+  const getCharColor = (charIndex) => {
+    const charProgress = charIndex / text.length;
+    return charProgress <= progress ? 'black' : 'white';
+  };
 
-export default function ScreenName() {
   return (
     <View style={styles.container}>
-      <Text style={styles.text}>Sample screen</Text>
+      <Text style={styles.text}>
+        {text.split('').map((char, index) => (
+          <Text key={index} style={{ color: getCharColor(index) }}>
+            {char}
+          </Text>
+        ))}
+      </Text>
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#61A6AB',
+    backgroundColor: '#FFCE6D',
     alignItems: 'center',
     justifyContent: 'center',
   },
   text: {
     fontSize: 24,
-    color: 'white',
   },
 });
+
+export default SpeechTherapyScreen;