How I build Finance News App with TTS feature

Hello everyone, I hope you're doing well today. I wanted to share a learning experience with you all. I recently created a news app that includes a text-to-speech feature. I utilized React Native and various APIs for the development process. Let's dive into the details. The first step is to set up your development environment with React Native. It's recommended to have a physical device connected to your PC to avoid using emulators.

npx react-native init

Then you got to run

npx react-native run-android

Now your app is probably running

Go to App.tsx file and make favorable changes around it.

Then the main feature of Text to speech comes. So I've used this library for text-to-speech feature react-native-tts.

This is so simple you just have to install the library

npm install --save react-native-tts

And Import it to your project

npm install --save react-native-tts

Now put the text you need to be speeched for example

Tts.speak('Hello, world!');

For my project I needed the news from the API to be speeched so I used this

const text=item.title
Tts.speak(text);

I've to implement the pause feature also so I used useState hook for this process-

const [isSpeaking,setSpeaking]=useState(false)
const handleSpeak = () => {
      if (!isSpeaking) {
        // Start speaking
        Tts.speak(text);
        setSpeaking(true);
      } else {
        // Stop speaking
        Tts.stop();
        setSpeaking(false)
      }
    };

Now my speech is ready to be listened to.

The full Code is here- https://github.com/harshlancer/Finance-News-App
Enjoy this feature.