SpeakerScreen.tsx

import { useState } from "react";
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import * as Speech from "expo-speech";

export default function HomeScreen() {
  const [text, setText] = useState("");

  const speakText = () => {
    Speech.speak(text, {
      language: "es-MX",
    });
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>AlexSanLo - Speech Audio APP</Text>

      <View style={styles.section}>
        <TextInput
          style={styles.input}
          placeholder="Escribe algo aquí..."
          placeholderTextColor={"#999999"}
          value={text}
          onChangeText={setText}
        />
        <TouchableOpacity onPress={speakText} style={styles.button}>
          <Text style={styles.buttonText}>Leer el voz alta</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#f0f0f5",
  },
  title: {
    fontSize: 28,
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 40,
    color: "#333333",
  },
  section: {
    marginBottom: 40,
    alignItems: "center",
    padding: 20,
  },
  input: {
    borderWidth: 1,
    borderColor: "#cccccc",
    borderRadius: 8,
    padding: 15,
    width: "100%",
    fontSize: 18,
    backgroundColor: "#ffffff",
    color: "#333333",
    marginBottom: 20,
  },
  button: {
    backgroundColor: "#007BFF",
    paddingVertical: 15,
    paddingHorizontal: 30,
    borderRadius: 8,
    shadowColor: "#000000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 3,
    elevation: 5,
    width: "100%",
    alignItems: "center",
    marginBottom: 10,
  },
  buttonText: {
    color: "#ffffff",
    fontSize: 18,
    fontWeight: "500",
  },
});