Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • NextJS
  • Material UI
  • React Bootstrap
  • React Suite
  • Ant Design
  • Reactstrap
  • BlueprintJS
  • React Desktop
  • React Native
  • React Rebass
  • React Spring
  • React Evergreen
  • ReactJS
  • ReactJS
  • JS Formatter
  • Web Technology
Open In App
Next Article:
Create a Task Manager App using React-Native
Next article icon

Create a Text Narrator App using React-Native

Last Updated : 01 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

Screenshot-2566-11-08-at-184203

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

aaaa

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.

JavaScript 
// 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

Text-narrator-using-react
Text narrator using react

Next Article
Create a Task Manager App using React-Native

P
pks9918705
Improve
Article Tags :
  • Web Technologies
  • ReactJS
  • Geeks Premier League
  • React-Native
  • Geeks Premier League 2023

Similar Reads

  • Create a Text Editor App using React-Native
    In this article, we are going to implement a text editor app using React Native. It will contain multiple text formatting functionalities like bold, italic, underline, etc. We will implement Editor with a library called "react-native-pell-rich-editor." Preview of final output: Let us have a look at
    3 min read
  • Create an Image to Text App using React-Native
    In this article, we are going to build a step-by-step Image to Text app using React-Native. This application will allow users to extract the text from the image using OCR (Optical Character Recognition) and later copy it to the clipboard or share it with others. This application is a perfect usage o
    4 min read
  • Create a Task Manager App using React-Native
    In this article, we'll walk you through the process of building a basic Task Manager app using React Native. The application enables users to effortlessly create, edit, complete/incomplete, and delete­ tasks, providing an uncomplicated yet impactful introduction to Re­act Native's mobile app develop
    7 min read
  • Create a Dashboard App using React-Native
    A dashboard app using react native is a software application designed to provide a consolidated and visual representation of important information, data, or features in a single, easily accessible interface. Dashboards are commonly used in various industries to help users monitor, analyze, and manag
    6 min read
  • Create a Typing Speed Monitor App using React-Native
    A typing speed monitor app using React-Native is a software application designed to assess and track a user's typing speed and accuracy. These apps are often used for educational purposes, professional development, or personal improvement in typing skills. Preview of final output: Let us have a look
    5 min read
  • Create Memes Generator App using React-Native
    The Me­me Generator App is a mobile­ application that allows users to effortlessly create memes. With its use­r-friendly interface, use­rs can choose from a wide collection of popular me­me templates and add their own customized text to the top and bottom. In this article, we will see how we can bui
    4 min read
  • Create Jokes Generator App using React-Native
    In this article, we are going to build a jokes generator app using react native. React Native enables you to master the­ designing an elegant and dynamic use­r interface while e­ffortlessly retrieving joke­s from external APIs. Let's take a look at how our completed project will look Prerequisites /
    3 min read
  • How to Create ToDo App using React Native ?
    In this article, we'll see how to create a ToDo app using React Native. An ideal illustration of a basic application that can be developed with React Native is a ToDo app. This app enables users to generate, modify, and remove tasks, assisting them in maintaining organization and concentration. Reac
    4 min read
  • Create a Food Reciepe App using React-Native
    In this React-Native article, we will be developing an interactive Food Recipe Application. In this application, the users can be able to search for any food recipe in the search box. Then, according to the search query, the results will be fetched through an API and will be displayed in the applica
    5 min read
  • Create a Crypto Prediction App using React Native
    Crypto Prediction App using React Native allows users to fetch real-time cryptocurrency prices and predict future price movements based on historical data. Users can enter the symbol of the cryptocurrency they're interested in, fetch its current price, and make predictions using simple logic. Output
    3 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences