2

I want to parse a string containing jsx into react-native Component

Example: 

const str1 = "Hi I am default text <Text style={{fontWeight: 'bold'}}>I am bold text</Text>";

Now I want to render it like below:

const App = props => {

  return (
     <View>
       <Text> {str1} </Text>
     </View>
  );
}

I should note that, the above code works if I change it to:

const str2 = <Text>Hi I am default text <Text style={{fontWeight: 'bold'}}>I am bold text</Text></Text>;

but per my condition str1 can be only string, because I am taking it from TextInput Component.

Expectation: str1 should be parsed like below:

Hi I am default text I am bold text

What is my goal ?

I want to create a post, within my app, think the post text is:

Hi friends How are you please Like the post.

As you can see Like is bold an italic, so I want to make something like this.

Muhammad
  • 2,572
  • 4
  • 24
  • 46
  • I render string as per your requirement and it works nothing harm in it. – Waheed Akhtar Apr 29 '20 at 11:19
  • @WaheedAkhtar, please render `str1` will you see string as `red` color without tag? – Muhammad Apr 29 '20 at 11:52
  • Does this answer your question? [Render HTML string as real HTML in a React component](https://stackoverflow.com/questions/39758136/render-html-string-as-real-html-in-a-react-component) – Fraction Apr 29 '20 at 12:26
  • @Fraction, thank you and no it is not my question, this is in `react-native` – Muhammad Apr 29 '20 at 12:41
  • @Muhammad I render `str1` but didn't see string as red at all. here is the `stri1` `'Hi I am default text I am red text'` – Waheed Akhtar Apr 29 '20 at 12:50
  • that's the problem, it should be parsed to `Hi I am default text I am red text` – Muhammad Apr 29 '20 at 12:52
  • but `I am red text`, should be red – Muhammad Apr 29 '20 at 12:52
  • Now, I have edited may you understand better – Muhammad Apr 29 '20 at 13:09
  • customize your component to handle 2 strings might be the solution for your scenario. – SDushan Apr 29 '20 at 13:59
  • @SDushan, it is an example, there is many more Component within the string – Muhammad Apr 29 '20 at 14:06
  • 1
    Oops, then you have to use something like ```react-native-webview``` to render multiple ```jsx``` inside your component. – SDushan Apr 29 '20 at 14:09
  • 1
    are you trying to make a dynamic `style` for your markdown? – Hagai Harari Apr 29 '20 at 14:45
  • @HagaiHarari, yeah roughly, I just gonna style a `text` even the `app` gets built. example I publish the app, people download it, then open it. then they want to create a new lesson, then they gonna give some `style` like `color, font` to the text then save it and it will be saved to db, then it will be displayed in `UI` here the style will be apear. – Muhammad Apr 29 '20 at 17:33
  • @Muhammad Your question seems similar to this question https://stackoverflow.com/questions/51608770/react-native-render-components-from-string-variable. Checkout its answers – Ayush Nawani May 02 '20 at 09:49
  • @AyushNawani yeah it is same, but there is not a solution for that too – Muhammad May 02 '20 at 11:23

0 Answers0