Commit 5d2eb43f authored by Udbhasa M M S's avatar Udbhasa M M S

speechtherapy text highlight

parent 5894542d
## 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
......
This diff is collapsed.
......@@ -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",
......
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;
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment