Building a Speech-to-Text Dictation Application with React Native

Set up the Project

To get started, follow these steps to set up your project:

• Install Expo CLI globally using the command: npm install -g expo-cli
• Initialize a new project using expo init and choose a blank project with a TypeScript configuration.
• Install required packages, including react-native-voice, react-native-reanimated, and @motify/components.

Configure the Voice Library

To configure the voice library, follow these steps:

• Add the react-native-voice plugin to app.json:

  {
    "expo": {
     ...
      "plugins": ["react-native-voice"]
    }
  }

• Add necessary permissions to app.json:

  {
    "expo": {
     ...
      "permissions": ["microphone"]
    }
  }

Implement Voice Recognition Functionality

Create a new component (e.g., Record/index.tsx) to handle voice recognition:

import { Voice } from 'eact-native-voice';

const Record = () => {
  const [speechText, setSpeechText] = useState('');

  const _startRecognizing = async () => {
    try {
      await Voice.start('en-US');
    } catch (error) {
      console.error(error);
    }
  };

  const _stopRecognizing = async () => {
    try {
      await Voice.stop();
    } catch (error) {
      console.error(error);
    }
  };

  Voice.onSpeechEnd = (event) => {
    setSpeechText(event.value);
  };

  return (
    <>
      <Button title="Start Recognizing" onPress={_startRecognizing}></Button>
      <Button title="Stop Recognizing" onPress={_stopRecognizing}></Button>
      <Text>{speechText}</Text>
    </>
  );
};

Integrate the Voice Library with the UI

Import the Record component into the main component (e.g., Home/index.tsx):

import React from 'eact';
import { View, Text } from 'eact-native';
import Record from '../Record';

const Home = () => {
  return (
    <View>
      <Record speechText={(text) => console.log(text)} />
    </View>
  );
};

Add Save Functionality

To add save functionality, follow these steps:

• Create a fake JSON server for API mocking using json-server.
• Create a database structure in db.json.
• Use react-query to handle data fetching and API calls.
• Create custom hooks (e.g., useCreateNote and useNotes) to handle note creation and fetching.
• Use the useCreateNote hook to save the recognized text to the database.

import { useMutation, useQueryClient } from 'eact-query';

const useCreateNote = () => {
  const queryClient = useQueryClient();

  return useMutation(
    async (note) => {
      const response = await fetch('/notes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(note),
      });
      return response.json();
    },
    {
      onSuccess: (data) => {
        queryClient.invalidateQueries('notes');
      },
    }
  );
};

Fetch and Render Notes

To fetch and render notes, follow these steps:

• Use the useNotes hook to fetch notes from the database.
• Render the notes in a FlatList component.

import React from 'eact';
import { FlatList } from 'eact-native';
import useNotes from '../hooks/useNotes';

const NoteList = () => {
  const { data, error, isLoading } = useNotes();

  if (isLoading) {
    return <Text>Loading...</Text>;
  }

  if (error) {
    return <Text>Error: {error.message}</Text>;
  }

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (<Text>{item.text}</Text>)}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};