React Native create text highlight styled Text component in Text component by function

Viewed 25

I am currently working on small project.

What I am trying to do is to create text hightlight in my speech to text react native app

My project has Flask API server to detect text data whether it is voice phishing or not.

I am using [react-native-voice]https://github.com/react-native-voice/voice for speech to text

my react native app will send text data segment every 5 seconds to Flask API server to find out whether it is voice phishing or not then Flask API server will return score that is 0 to 1 so over 0.5 is voice phishing

anyway what i am trying to say is that when the text data is considered to be voice phishing (score over 0.5) text data on my app will be highlighted

here is my TextBox Component code

is that possible my setHighlight function

input

hi my name is woo young from Well Bing Bank give me your account my number is 112-22314-12314. Thank you.

return

hi my name is woo young from Well Bing Bank
<Text style={styles.highlighted}>
 give me your account
<Text>
my number is 112-22314-12314. Thank you.

but it returns

hi my name is woo young from Well Bing Bank
[object Object]
my number is 112-22314-12314. Thank you.
import { Text, View, StyleSheet } from "react-native";

const NO_WIDTH_SPACE = '​';
const highlight = string =>
  string.split(' ').map((word, i) => (
    <Text key={i}>
      <Text style={styles.highlighted}>{word} </Text>
      {NO_WIDTH_SPACE}
    </Text>
  ));
export default class TextBox extends Component {
  
  setHighlight = (string, array) => {
    for (let i = 0; i < (array.length)/2; i++) {
      let seg = string.slice(array[2*i], array[2*i+1])
      let firstIdx = string.slice(0, array[2*i-1])
      let lastIdx = string.slice(array[2*i+2], array.length)
      let segText = highlight(seg)
      let result = firstIdx + segText + lastIdx
      return result
    }
  }


  render = () => {
    return(
      <View style={styles.textBox}>
        {this.props.partialResults.map((result, index) => {
          const hightlightText = this.setHighlight(result,[3,4])
          return (
            <Text style={styles.resultText} key={`partial-result-${index}`}>
              { hightlightText }
            </Text>
          )
        })}
    </View>
    )
  }
}


const styles = StyleSheet.create({
  textBox: {
    marginTop: 10,
    width: 330,
    height: 400,
    backgroundColor: "white",
    borderWidth: 2,
    padding: 10,
    borderColor: "dodgerblue"
  },
  resultText: {
    fontSize: 18
  },
  highlighted: {
    padding:2,
    backgroundColor: 'red',
  },
})
1 Answers

Not sure if your logic is sound but you can return the result as JSON Stringify, that may indicate what that object contains and give you a better idea what to return.

setHighlight = (string, array) => {
    for (let i = 0; i < (array.length)/2; i++) {
      let seg = string.slice(array[2*i], array[2*i+1])
      let firstIdx = string.slice(0, array[2*i-1])
      let lastIdx = string.slice(array[2*i+2], array.length)
      let segText = highlight(seg)
      let result = firstIdx + segText + lastIdx
      return JSON.stringify(result)
    }
  }
Related