React Native render Components from String variable

Question

Or maybe the question should have been, How to convert string to JSX?

In any case, I am trying to do a performance hack on my react native app that requires me to render React native components from a string variable.

For instance,

let item = "<View>
  <Text>
      This is an item
  </Text>
</View>";

Now in my render function, I want to render it like so:

render() {
    return (
      <View>
        {item}
      </View>
    );
}

As it is now if I try to run the application it gives an error because I am trying to render text inside a View component. If I try to wrap the item inside text before rendering, It just renders the item as plain text on the screen, with all the <View> and <Text> tags as strings.

How can I then render this so that the tags from the string behave as normal React Native component instead of just appearing as strings?

I have searched all over but haven't found a solution.

I will appreciate any suggestions.

@Awa Melvine, Same problem not, found any solution if you found any kindly please share it — Muhammad
– Muhammad, Commented May 2, 2020 at 11:21

Vasiliy vvscode Vanchuk · Accepted Answer · 2019-01-20 08:49:14Z

2

Try one of these two packages:

https://www.npmjs.com/package/acorn-jsx

https://www.npmjs.com/package/react-jsx-parser

Both allow to parse a string to jsx on the fly (Have no chance to test in RN, but for React in web works fine )

answered Jan 20, 2019 at 8:49

Vasiliy vvscode Vanchuk

7,1992 gold badges24 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SiSa · Accepted Answer · 2018-07-31 09:09:33Z

0

If you put object instead of string you can easily set it inside view. But if you want to use string, you have to write a converter and extract each element as string and check and convert to it's equivalent view.
If your views have props you have to convert them also(it will be a little bit harder!)

answered Jul 31, 2018 at 9:09

SiSa

2,6841 gold badge19 silver badges33 bronze badges

Comments

El Mehdi BOUTGAYOUT · Accepted Answer · 2022-01-31 08:09:23Z

0

+50

I think the only solution for this problem, is to declare your variable like so :

var str = <Detail_page1/>

and then wrap it with a view like this :

<View> {str} </View>

answered Jan 31, 2022 at 8:09

El Mehdi BOUTGAYOUT

511 bronze badge

Collectives™ on Stack Overflow

React Native render Components from String variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related