Create a Text Narrator App using React-Native

In this project, we'll develop a Text Narrator application using React Native. The Text Narrator app is a valuable tool for improving accessibility. It allows users to input text, and the app will convert that text into audible speech. This can be incredibly helpful for individuals with visual impairments or reading difficulties, making it easier for them to consume written information.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites

• NPM
• React Native

Approach

1. Text Input: Users can input the text they want to hear.
2. Speech Feature: The app will use the `expo-speech` library to convert the text into audible speech.
3. User-Friendly Interface: The app will have a simple and user-friendly design.

Steps to Create & Configure React Native App:

Step 1: Create a new React Native project.

npx react-native init TextEditorApp

Step2: Navigate to the project directory:

  cd TextEditorApp

Step 3: Install 'expo-speech'

npm i expo-speech

Project Structure

The updated dependencies in the package.json file will look like:

"dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^13.0.0",
    "expo-speech": "~11.1.1"
}

Example: Implementation of above approach in the App.js file.

// App.js 
import * as React from 'react'; 
import { View, StyleSheet, Button, TextInput, Text } from 'react-native'; 
import * as Speech from 'expo-speech'; 
export default function App() { 
	const [textToSpeak, setTextToSpeak] = React.useState(''); 
	
	// State to store user input 
	const speak = () => { 
		Speech.speak(textToSpeak); 
	} 
	return( 
		<View style={styles.container}> 
			<Text style={styles.gfg}>GFG Text Narrator</Text> 
			<TextInput style={styles.input} 
					placeholder="Enter text to speak"
					onChangeText={setTextToSpeak} 
					value={textToSpeak} /> 
			<Button title="Speak" onPress={speak} /> 
		</View> 
	) 
} 
const styles = StyleSheet.create( 
	{ 
		container: { 
			height: "100%", 
			display: "flex", 
			flexDirection: "column", 
			alignItems: "center", 
			backgroundColor: '#ecf0f1', 
			padding: 8, 
			paddingTop: 80, 
			marginTop: 10 
		}, 
		gfg: { 
			marginBottom: 100, 
			color: "green", 
			fontSize: 35, 
		}, 
		input: { 
			height: 40, 
			width: 200, 
			borderColor: 'gray', 
			borderWidth: 1, 
			marginBottom: 10, 
			paddingHorizontal: 8, 
		}, 
	});

Steps to Run Application:

Step 1: To run the app in an iOS simulator or on a connected iOS device:

npx react-native run-ios

Step 2 :To run the app in an Android emulator or on a connected Android device:

npx react-native run-android

Output