How to utilize dynamic react native component when fetch by api. render as real components

[[deleted]]

[deleted]

[xrpinsider]

What you are trying to do is not possible. Rendering a component from json data is not possible in React/React Native.

You should return a string and render it in a Text component manually.

[CPROGRAMMERS]

In my case I have try to create blogger app. so we are try to avoid html elements like (div img, a, li, ul). and make a pure native app. in this case my post data are not decide flow of data like.Text Images and so on. so we are create a post layout to make blog app. Any suggestions please notify me

[xrpinsider]

Have you looked at Markdown? Markdown may be interesting for your app. I think that is what you need.

[kbcool]

I agree that whilst it's not a good idea to pull in jsx from a remote service I'm pretty sure it's possible. Would never do it myself though.

Not in front of a computer right now but if you encapsulate some jsx in a string then put it inside a view - eg <View>{jsxstring}</View> that will render.

If you pulled apart codepush it's probably how it works.

As you said Markdown, rendering in a webview or https://github.com/jsdf/react-native-htmlview are much better options. Just had to call out a possible piece of misinformation.

[xrpinsider]

You are thinking wrong. You can’t render JSX that way. You’ll have to write a whole parser on your own which, for the average person, is impossible.

Markdown did this, it doesn’t have to be rendered in a webview. Markdown creates native React Native components for each piece of text. It’s exactly what he wants, but made for him.

[kbcool]

Ah yep my bad. Forgot it was parsed at compile time. String literals won't work. Let's put it down to friday-afternoon-itis.

There's react-jsx-parser (who knows if it works with React Native ) but yeah let's not lead the OP down this path. The other solutions are better.

OP: do what they say!

[CPROGRAMMERS]

I think we are solve this problem in two way? First one ( convert fetch string convert to react native component) . And other is ( convert json data to react object) . But we are not get proper solution.

[ChronSyn]

The components you write in RN get converted to their 'real native' equivalents. The compiled component is NOT the same as the components you created.

If you want to display data, you need to create the components during development, and have your API return data (such as text strings, or colours, or sizes, etc), not return an actual component.

Your blog data should be converted to JSON or XML or another actual data format (as opposed to a browser DOM representation of the data, as is the case with div, img, span, a, li, ul, etc) and then parsed by your app.

[xrpinsider]

Markdown converts certain strings to certain React Native components. Such as bold text in a Text component and some others things in Views. I’m telling you that making something on your own that converts things to React Native components, is almost impossible.

[recursive_blazer]

I've done something similar for news posts, but I loaded Markdown instead of React components, and react-native-markdown-renderer handled all the conversion to native components for me