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.

15
  • I render string as per your requirement and it works nothing harm in it. Commented Apr 29, 2020 at 11:19
  • @WaheedAkhtar, please render str1 will you see string as red color without tag? Commented Apr 29, 2020 at 11:52
  • Does this answer your question? Render HTML string as real HTML in a React component Commented Apr 29, 2020 at 12:26
  • 1
    Oops, then you have to use something like react-native-webview to render multiple jsx inside your component. Commented Apr 29, 2020 at 14:09
  • 1
    are you trying to make a dynamic style for your markdown? Commented Apr 29, 2020 at 14:45

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.