0

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>)
  }
aravind_reddy
  • 5,236
  • 4
  • 23
  • 39

1 Answers1

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.

Zaytri
  • 2,582
  • 2
  • 13
  • 19
  • i tired that already but there are \n inside the text which is make the text after that go down and blank is coming upside – aravind_reddy Mar 27 '19 at 17:38
  • In that case, I would recommend splitting the string via `'\n'` first, and having a `View` wrapper for each element of that array. – Zaytri Mar 27 '19 at 18:03