voice
voice copied to clipboard
Not working on multiple screen
import React, { useEffect, useState } from "react"; import Voice from "@react-native-voice/voice"; import { PERMISSIONS, RESULTS, openSettings, request, } from "react-native-permissions"; import { Alert, Keyboard, Platform } from "react-native"; import { showMessage } from "react-native-flash-message";
let timer;
export const useHandleSpeechToText = () => { const [stopRecording, setStopRecording] = useState(false); const [recognizedText, setRecognizedText] = useState(); const [speechRecognized, setSpeechRecognized] = useState(false); const [isMicOn, setIsMicOn] = useState(false); const [timerSeconds, setTimerSeconds] = useState(0); const [text, setText] = useState('')
const startTimer = () => { timer = setInterval( () => setTimerSeconds((timerSeconds) => timerSeconds + 1), 1000 ); };
const resetTimer = () => { if (timer) { clearInterval(timer); timer = null; } setTimerSeconds(0); };
useEffect(() => { let isMounted = true;
Voice.onSpeechResults = (e) => {
if (isMounted) {
setRecognizedText(e.value?.[0]);
setSpeechRecognized(true);
}
};
return () => {
isMounted = false;
Voice.destroy()?.then(Voice.removeAllListeners);
};
}, []);
useEffect(() => { if (speechRecognized && recognizedText && recognizedText !== "" && stopRecording) { setSpeechRecognized(false); setStopRecording(false);
setText(prevText => {
const trimmedText = prevText.trim();
const trimmedRecognizedText = recognizedText.trim();
if (trimmedText === "") {
return trimmedRecognizedText;
} else {
return trimmedText + " " + trimmedRecognizedText;
}
});
}
}, [speechRecognized, recognizedText, stopRecording]);
const checkForPermission = async (callBack) => {
request(
Platform.OS === "ios"
? PERMISSIONS.IOS.SPEECH_RECOGNITION
: PERMISSIONS.ANDROID.RECORD_AUDIO
)
.then((result) => {
if (result == RESULTS.GRANTED) {
callBack(true);
} else {
callBack(false);
}
})
.catch(() => {
callBack(false);
});
};
const handleSpeechToText = async () => {
resetTimer();
setText('')
if (!isMicOn) {
Keyboard.dismiss();
checkForPermission((success) => {
if (!success) {
const permissionText =
Platform.OS === "ios"
? "Speech Recognition Permission"
: "Mic Permission";
Alert.alert(
${permissionText} Needed,
Please allow ${permissionText} from settings to enable speech to text,
[
{
text: "OK",
onPress: () => openSettings(),
style: "OK",
},
]
);
} else {
try {
Voice.start("en-US")
.then(() => {
setRecognizedText();
setStopRecording(false);
setIsMicOn(!isMicOn);
startTimer();
})
.catch(() => {
showMessage({
message: "Error starting speech recognition",
description: "Please try again.",
type: "danger",
backgroundColor: "red",
});
});
} catch (e) {
setIsMicOn(false);
showMessage({
message: "Error starting speech recognition",
description: "Please try again.",
type: "danger",
backgroundColor: "red",
});
}
}
});
} else {
setIsMicOn(!isMicOn);
setStopRecording(true);
try {
await Voice.stop();
} catch (e) { }
}
};
return { handleSpeechToText, setIsMicOn, isMicOn, timerSeconds, text }; };
"@react-native-voice/voice": "^3.2.4",
"react": "17.0.2", "react-native": "0.68.5",
I'm using the above common function on multiple screens but it's working only the first time if I use the same function on another screen it's not working.
me too,It also doesn't work on foldable phones.