First of all, create a new react native application using the following command on the power shell or any command line that you use. Make sure that you have After this, set up your mobile device\/ emulator for debugging purposes and install Android Studio for further usage.<\/p>\n\n\n\n Now, running our application using the following command on power shell<\/p>\n\n\n\n To automatically link your package, enter the following command:<\/p>\n\n\n\n For ios, run the following to link the package:<\/p>\n\n\n\n Now, use the following command to import the necessary library to run the package:<\/p>\n\n\n\n Defining the state of the component so that we can save the pitch, start and endpoint of the voice recording, error if any occurs, and the results as well.<\/p>\n\n\n\n Voice from react-native voice package contains certain events that occur which are as follows:<\/p>\n\n\n\n For each of these events, we have to declare handlers which will be called once any of the events occurs.<\/p>\n\n\n\n After we have declared all the event handlers we have to attach them to the Voice Package that we have used so that they can be triggered as follow. We will do this in the Now define an HTML Component in the return statement which will be used to trigger the start recognizing function. For this, in this article, we have used two different icons, one for start recording As you can see there are two functions that are visible stopSpeechRecognizing and startSpeechRecognizing, these two functions are called once the user presses the start or stop button. In these two functions we trigger the package\u2019s different functions as follows:<\/p>\n\n\n\n As we can see in the npx<\/code> installed.<\/p>\n\n\n\nnpx react-native init Speech2Text<\/code><\/pre>\n\n\n\nRun Your Application:<\/strong><\/h2>\n\n\n\n
cd Speech2Text\nnpx react-native run-android \t(For Android)\nnpx react-native run-ios \t(For ios)<\/code><\/pre>\n\n\n\nreact-native link @react-native-community\/voice<\/code><\/pre>\n\n\n\nnpx pod-install<\/code><\/pre>\n\n\n\nImport Necessary Package:<\/strong><\/h2>\n\n\n\n
import Voice from '@react-native-community\/voice';<\/code><\/pre>\n\n\n\nDefining the State:<\/strong><\/h2>\n\n\n\n
const [pitch, setPitch] = useState('');\n const [error, setError] = useState('');\n const [end, setEnd] = useState('');\n const [started, setStarted] = useState('');\n const [results, setResults] = useState([]);\n const [partialResults, setPartialResults] = useState([]);<\/code><\/pre>\n\n\n\nconst onSpeechStart = (e) => {\n setStarted('True')\n};\nconst onSpeechEnd = () => {\n setStarted(null);\n setEnd('True');\n};\nconst onSpeechError = (e) => {\n setError(JSON.stringify(e.error));\n};\nconst onSpeechResults = (e) => {\n setResults(e.value)\n};\nconst onSpeechPartialResults = (e) => {\n setPartialResults(e.value)\n};\nconst onSpeechVolumeChanged = (e) => {\n setPitch(e.value)\n};<\/code><\/pre>\n\n\n\nuseEffect()<\/code> hook so that they are bind upon component mounting.\u00a0<\/p>\n\n\n\nVoice.onSpeechStart = onSpeechStart;\nVoice.onSpeechEnd = onSpeechEnd;\nVoice.onSpeechError = onSpeechError;\nVoice.onSpeechResults = onSpeechResults;\nVoice.onSpeechPartialResults = onSpeechPartialResults;\nVoice.onSpeechVolumeChanged = onSpeechVolumeChanged;<\/code><\/pre>\n\n\n\n![](\"https:\/\/lh5.googleusercontent.com\/hjv1brDP04M3lwOymRAUoGGd_AFhwv78XU1QnN8udAxoqxicZJn6QanOVouvVIiOYleu6xXD3UdGGmVg4rSSdnWXCSzIjWT9bfn9e24FfMlspGJMxovD5Pq34JSJZUK-jethMK5B\")
![](\"https:\/\/lh4.googleusercontent.com\/F7PAdYzrpqr4FapiQigLnui-52-Ak40R8-7U3JfvI9EUVpmcsZXMPeDfa2idwYXxOoL2cQxtfLo01YSvn5i8acV14QS5wtexgBY1plVRP36ISfz-MAqTLTVZAdO7SjYrelY6eEcm\")
{!started?\n <TouchableHighlight\n onPress={ startSpeechRecognizing }\n style={{ marginVertical: 100 }}>\n <Image\n style={styles.button} source={{ uri: 'https:\/\/png.pngtree.com\/png-vector\/20190329\/ourlarge\/pngtree-vector-microphone-icon-png-image_889382.jpg', }} \/>\n <\/TouchableHighlight>\n : \n <TouchableHighlight\n onPress={ stopSpeechRecognizing }\n style={{ marginVertical: 100 }}>\n <Image\n style={styles.button} source={{ uri: 'https:\/\/preview.redd.it\/axorctfsk4v01.jpg?auto=webp&s=b9f5f8c1a353bd10aa7f3fa61e24b756ff042a7b', }}\/>\n <\/TouchableHighlight>}<\/code><\/pre>\n\n\n\nconst startSpeechRecognizing = async () => {\n setPitch('')\n setError('')\n setStarted('')\n setResults([])\n setPartialResults([])\n setEnd('')\n try {\n await Voice.start('en-US',\n {EXTRA_SPEECH_INPUT_MINIMUM_LENGTH_MILLIS: 10000});\n } catch (e) {\n console.error(e);\n }\n };\nconst stopSpeechRecognizing = async () => {\n try {\n \tawait Voice.stop();\n \tsetStarted(null);\n } catch (e) {\n \tconsole.error(e);\n }\n };\n<\/code><\/pre>\n\n\n\nstartSpeechRecognizing() <\/code>function that we have triggered the start event of the package using Voice.start()<\/code> and we have passed en-US as the first parameter so that the interpreter knows in which user will be speaking. Here we have used this for the English language. Except for this, we can see there is another parameter EXTRA_SPEECH_INPUT_MINIMUM_LENGTH_MILLIS<\/code>. There is a minor issue with this package that as soon as it does not get any input, it stops recognizing. Hence to increase the delay after no input is spoken, we have used this parameter.<\/p>\n\n\n\n<ScrollView style = {styles.messageBox}>\n {partialResults.map((result, index) => {\n return (\n <Text key={`partial-result-${index}`} style={ styles.resultBox }>\n {result}\n <\/Text>\n ); })}\n<\/ScrollView><\/code><\/pre>\n\n\n\n
![](\"https:\/\/lh5.googleusercontent.com\/is8yN4ZaFoOZyU8dL7o4vZt9snnhbOPqyjRY2wIps2QsJxAYuKCU9FU2H3D3B-wSIO7-YH0DtaUBlF_a4rLIECScYMnWyirh97ku_E-vsIgwlf-D_AD5NKWV7nCLbM4QWsYU1HNb\")
<\/p>\n\n\n\n![](\"https:\/\/lh5.googleusercontent.com\/aotSudWe8c8GzQMD5Y9sSmMMV7ViYetREDFJXUFpBoqPXJ0PRave38kQcdIBkQ1DlshdQdQMoMBPdX7xFnqp6I584tvfGvRIQJ8lB_g-_a8Lrv-LHy5gNa1_M4LXxltTPjU9rdqc\")
<\/p>\n\n\n\n