Using text to speech in react native

Question

I am trying to work on a react native app which will translate text into speech... But can not figure out the way to link the input of my TextInput element to the function that does the translation..

I will share my code here

const HomeScreen = ({ navigation }) => {
  const speak = () => {
    let thingToSay = "i will try to remember";
    Speech.speak(thingToSay);
  };

  return (
    <View style={styles.screen}>
      <ImageBackground
        source={require("./assets/book.png")}
        style={styles.backgroundImage}
      >
        <View style={styles.innerText}>
          <Text style={styles.textDisplay}>
            Type the sentence you want to practice
          </Text>

          <View>
            <TextInput placeholder="HERE" />
          </View>

          <Button title="TRANSLATE" onPress={speak} />
          {/* <Button title="SEND" /> */}
        </View>
      </ImageBackground>
    </View>
  );
};

Answer 1

Here's how you'd do it.

Add state management to hold the text and add method to update the state on textInputChange.

const HomeScreen = ({ navigation }) => {
  const [textToSpeak, setTextToSpeak] = useState('');
  
  const speak = () => {
    Speech.speak(textToSpeak);
  };
  
  const _onChangeText = text => setTextToSpeak(text);

  return (
    <View style={styles.screen}>
      <ImageBackground
        source={require("./assets/book.png")}
        style={styles.backgroundImage}
      >
        <View style={styles.innerText}>
          <Text style={styles.textDisplay}>
            Type the sentence you want to practice
          </Text>

          <View>
            <TextInput
              placeholder="HERE"
              onChangeText={_onChangeText}
            />
          </View>

          <Button title="TRANSLATE" onPress={speak} />
          {/* <Button title="SEND" /> */}
        </View>
      </ImageBackground>
    </View>
  );
};