CODEWITHSUNDEEP
javascriptreactjsreact-nativeapitext-to-speech
Elisa Levet
Elisa Levet

Reputation: 23

Using text to speech in react native

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>
  );
};

Upvotes: 1

Views: 1130

Answers (1)

Tomas
Tomas

Reputation: 1051

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>
  );
};

Upvotes: 2

Related Questions