replace specific text with view in reactNative

Question

iam having a text string with characters like "__"(two underscores) in the string whenever i encounter the two underscores i want to replace them with a specific view like box and render it so for example:

str = "iam __ and i want to go to __"

so i want to render iam (want to render rectangular box here) and i want to go to (rectangular box here)

i have tried using the split function in js and split them by __ and tried pushing the jsx to array based on condition but it was rendering in different lines is there any better way to do it code i tried:

const stringsArr = str.split('__');
    const toRender = []
    for(let i=0;i<stringsArr.length;i++){
        toRender.push(<Text styles={styles.emptyBlock} />)
        toRender.push(<Text>{stringsArr[i]}</Text>)
  }

Answer 1

Components will render below each other by default. Wrap a View around each text line and give it a style of flexDirection: 'row' so that they render side by side. If you want it working like a paragraph, then apply flexWrap: 'wrap' as well.