Steps to Create React Native App
Step 1: Create a react native application by using this command in the command prompt
React-native init TypingApp
Step 2: We will use some Icons in our app so, we will install dependency for icon.
npm i react-native-vector-icons
npm i react-native-fontawesome
Project Structure:
Structure of the app
The updated dependencies in package.json file will look like:
"dependencies": {
"mobx": "4.1.0",
"mobx-react": "5.0.0",
"@expo/vector-icons": "^13.0.0",
"react-native-elements": "0.18.5",
"react-native-vector-icons/FontAwesome": "*",
"react-native-vector-icons": "10.0.3"
}
Example: Below is the source code of Typing Speed Monitor the React-Native
Javascript
import React,{ useState, useEffect} from 'react';import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView,} from 'react-native';const TypingSpeedMonitorApp = () => { const sampleText =`w3wiki is a computer science portal that provides a wide variety of resources for programmers and computer science enthusiasts. It was created with the goal of providing high-quality educational content to help individuals learn and improve their programming and computer science skills.`; const [text, setText] = useState(''); const [startTime, setStartTime] = useState(0); const [endTime, setEndTime] = useState(0); const [typingSpeed, setTypingSpeed] = useState(0); const [isTyping, setIsTyping] = useState(false); const [timer, setTimer] = useState(60); const [errors, setErrors] = useState(0); useEffect(() => { let timerInterval; if (isTyping) { timerInterval = setInterval(() => { setTimer((prevTimer) => { if (prevTimer === 1) { clearInterval(timerInterval); handleEndTyping(); return 60; } return prevTimer - 1; }); }, 1000); } return () => { clearInterval(timerInterval); }; }, [isTyping]); useEffect(() => { if (startTime && endTime && text.trim().length > 0) { const timeDiffInSeconds = (endTime - startTime) / 1000; const wordsPerMinute = (text.split(' ').length / timeDiffInSeconds) * 60; setTypingSpeed(wordsPerMinute.toFixed(2)); } }, [endTime]); const handleStartTyping = () => { setText(''); setStartTime(new Date().getTime()); setIsTyping(true); setErrors(0); }; const handleEndTyping = () => { setEndTime(new Date().getTime()); setIsTyping(false); setTimer(60); if (text.trim().length > 0) { calculateErrors(); } }; const calculateErrors = () => { const sampleWords = sampleText.split(' '); const enteredWords = text.split(' '); let errorCount = 0; for (let i = 0; i < sampleWords.length; i++) { if (sampleWords[i] !== enteredWords[i]) { errorCount++; } } setErrors(errorCount); }; const handleReset = () => { setText(''); setStartTime(0); setEndTime(0); setTypingSpeed(0); setIsTyping(false); setTimer(60); setErrors(0); }; return ( <ScrollView contentContainerStyle={styles.container}> <Text style={styles.heading}> Typing Speed Monitor </Text> <Text style={styles.timer}> Timer:- {timer}s </Text> <Text style={styles.sampleText}> {sampleText} </Text> <TextInput style={styles.input} multiline placeholder="Type here..." value={text} onChangeText= { (value) => setText(value) } editable={isTyping} /> <View style={styles.buttonsContainer}> {isTyping ? ( <TouchableOpacity style={styles.endButton} onPress={handleEndTyping}> <Text style={styles.buttonText}> End Typing </Text> </TouchableOpacity> ) : ( <TouchableOpacity style={styles.startButton} onPress={handleStartTyping}> <Text style={styles.buttonText}> Start Typing </Text> </TouchableOpacity> )} <TouchableOpacity style={styles.resetButton} onPress={handleReset}> <Text style={styles.buttonText}> Reset </Text> </TouchableOpacity> </View> {endTime > 0 && ( <View style={styles.result}> <Text style={styles.resultText}> Typing Speed: {typingSpeed} words per minute </Text> <Text style={styles.resultText}> Error Count: {errors} </Text> </View> )} </ScrollView> );};const styles = StyleSheet.create({ container: { flexGrow: 1, padding: 16, backgroundColor: '#f8f8f8', }, heading: { fontSize: 24, fontWeight: 'bold', marginTop: 30, marginBottom: 16, justifyContent: 'center', }, timer: { fontSize: 26, fontWeight: 'bold', marginBottom: 16, marginLeft: 10, backgroundColor: 'yellow', marginRight: 130, borderRadius: 20, }, sampleText: { marginBottom: 16, fontStyle: 'italic', textAlign: 'center', color: '#555', backgroundColor: 'lightgreen', borderRadius: 20, padding: 30, fontWeight: 'bold', }, input: { height: 100, borderColor: '#3498db', borderWidth: 1, marginBottom: 16, padding: 8, fontSize: 16, color: '#333', }, buttonsContainer: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 16, }, startButton: { flex: 1, backgroundColor: '#2ecc71', padding: 12, borderRadius: 8, alignItems: 'center', marginRight: 8, }, endButton: { flex: 1, backgroundColor: '#e74c3c', padding: 12, borderRadius: 8, alignItems: 'center', marginRight: 8, }, resetButton: { flex: 1, backgroundColor: '#3498db', padding: 12, borderRadius: 8, alignItems: 'center', }, buttonText: { color: '#fff', fontWeight: 'bold', }, result: { marginTop: 16, backgroundColor: '#fff', padding: 16, borderRadius: 8, }, resultText: { fontSize: 16, marginBottom: 8, fontWeight: 'bold', },});export default TypingSpeedMonitorApp; |
Step to Run the Project:
Step 1: Depending on your operating system, type the following command
- For android:
React-native run-android
- For IOS:
React-native run-ios
Output:
Output of the app
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 at how the final application will look like.
Preview of the app