The code does not report an error, and the phone also displays it, but it does not run when the button is pressed. Here are my codes.
<code>''import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import * as Speech from 'expo-speech';
export default function App() {
const [recognizedText, setRecognizedText] = useState('');
const [comparisonResult, setComparisonResult] = useState('');
const handleStartRecording = async () => {
try {
console.log('Starting recording...');
Speech.stop();
await Speech.startListeningAsync({ language: 'en-US' });
} catch (error) {
console.error('Speech recognition error:', error);
}
};
const handleCompareText = async () => {
try {
const response = await fetch('http://127.0.0.1:5000/compare', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: recognizedText }),
});
const result = await response.json();
setComparisonResult(result.comparison);
} catch (error) {
console.error('Comparison request failed', error);
}
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={handleStartRecording}>
<View style={styles.button}>
<Text style={styles.buttonText}>Start Recording</Text>
</View>
</TouchableOpacity>
<TextInput
style={styles.textInput}
value={recognizedText}
onChangeText={text => setRecognizedText(text)}
placeholder="Recognized text will display here"
/>
<TouchableOpacity onPress={handleCompareText}>
<View style={styles.button}>
<Text style={styles.buttonText}>Compare Text</Text>
</View>
</TouchableOpacity>
<Text style={styles.resultText}>{comparisonResult}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
button: {
backgroundColor: '#007AFF',
padding: 10,
borderRadius: 5,
marginVertical: 10,
},
buttonText: {
color: '#fff',
fontSize: 18,
},
textInput: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
width: '80%',
marginVertical: 20,
paddingHorizontal: 10,
},
resultText: {
marginTop: 20,
fontSize: 16,
color: 'red',
},
});
''
</code>
<code>''import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import * as Speech from 'expo-speech';
export default function App() {
const [recognizedText, setRecognizedText] = useState('');
const [comparisonResult, setComparisonResult] = useState('');
const handleStartRecording = async () => {
try {
console.log('Starting recording...');
Speech.stop();
await Speech.startListeningAsync({ language: 'en-US' });
} catch (error) {
console.error('Speech recognition error:', error);
}
};
const handleCompareText = async () => {
try {
const response = await fetch('http://127.0.0.1:5000/compare', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: recognizedText }),
});
const result = await response.json();
setComparisonResult(result.comparison);
} catch (error) {
console.error('Comparison request failed', error);
}
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={handleStartRecording}>
<View style={styles.button}>
<Text style={styles.buttonText}>Start Recording</Text>
</View>
</TouchableOpacity>
<TextInput
style={styles.textInput}
value={recognizedText}
onChangeText={text => setRecognizedText(text)}
placeholder="Recognized text will display here"
/>
<TouchableOpacity onPress={handleCompareText}>
<View style={styles.button}>
<Text style={styles.buttonText}>Compare Text</Text>
</View>
</TouchableOpacity>
<Text style={styles.resultText}>{comparisonResult}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
button: {
backgroundColor: '#007AFF',
padding: 10,
borderRadius: 5,
marginVertical: 10,
},
buttonText: {
color: '#fff',
fontSize: 18,
},
textInput: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
width: '80%',
marginVertical: 20,
paddingHorizontal: 10,
},
resultText: {
marginTop: 20,
fontSize: 16,
color: 'red',
},
});
''
</code>
''import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import * as Speech from 'expo-speech';
export default function App() {
const [recognizedText, setRecognizedText] = useState('');
const [comparisonResult, setComparisonResult] = useState('');
const handleStartRecording = async () => {
try {
console.log('Starting recording...');
Speech.stop();
await Speech.startListeningAsync({ language: 'en-US' });
} catch (error) {
console.error('Speech recognition error:', error);
}
};
const handleCompareText = async () => {
try {
const response = await fetch('http://127.0.0.1:5000/compare', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: recognizedText }),
});
const result = await response.json();
setComparisonResult(result.comparison);
} catch (error) {
console.error('Comparison request failed', error);
}
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={handleStartRecording}>
<View style={styles.button}>
<Text style={styles.buttonText}>Start Recording</Text>
</View>
</TouchableOpacity>
<TextInput
style={styles.textInput}
value={recognizedText}
onChangeText={text => setRecognizedText(text)}
placeholder="Recognized text will display here"
/>
<TouchableOpacity onPress={handleCompareText}>
<View style={styles.button}>
<Text style={styles.buttonText}>Compare Text</Text>
</View>
</TouchableOpacity>
<Text style={styles.resultText}>{comparisonResult}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
button: {
backgroundColor: '#007AFF',
padding: 10,
borderRadius: 5,
marginVertical: 10,
},
buttonText: {
color: '#fff',
fontSize: 18,
},
textInput: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
width: '80%',
marginVertical: 20,
paddingHorizontal: 10,
},
resultText: {
marginTop: 20,
fontSize: 16,
color: 'red',
},
});
''
enter image description hereenter image description here
i have corrected the Component Library Usage, and Inspected Styles and Layout. And literally don’t know what to do:(. Need some help, many thanks.
New contributor
Olivia Liu is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.