Is it possible to dynamically create components in React Native?

Question

Is it possible to dynamically create and add view components in React Native? For example, firstly, I only have a blank screen, and information about all the views comes from the server in JSON, and then I need to generate them on the screen. For example, an application receiving json from a server. This json describes the screen to be built:

{ "type": "linearlayout", "subviews": [{ "type": "text", "fields": { "text": "This is text field" }, "styles": { "color": "", "textSize": 14 } }, { "type": "button", "fields": { "text": "JUST BUTTON" }, "transition": { "name": "http://www.link.com" } }, { "type": "text", "fields": { "text": "This is another text field" }, "styles": { "color": "", "textSize": 18 } }] } 

So with this JSON, I need to dynamically view the creation in React Native. But I don’t see the possibility of writing JS code inside JSX - only static representations and dynamic props change

Answer 1

Yes it is possible. Suppose you have successfully extracted the JSON data and saved it in some state, and then in your rendering function you can use it like this:

 render() { var productList = []; this.state.data.products.forEach(function (tmpProduct) { productList.push( <View style={cardView} key={tmpProduct.id}> <Grid style={upperGrid}> <Col style={{flex: 0.5}}> <Thumbnail source={require('../../../images/sample-image.png')} style={itemThumb}> </Col> <Col> <Text style={cardItemHeader} numberOfLines={2}>{tmpProduct.title}</Text> <Text style={cardItemBody} numberOfLines={2}>{tmpProduct.description}</Text> </Col> </Grid> </View> ); }.bind(this)); return ( <Container theme={theme}> <Image source={require('../../../images/grad-bg.png')} style={background} > <Content style={scrollContent}> {productList} </Content> </Image> </Container> ) } 

Hope this code snippet gives you an idea. You can adapt it to your business.

Answer 2

One of the advantages of using the native (vs webview) response is that your users will not look at blank screens when the application loads the data. If you return all the views from the server, then it works like a web page. I used to do something similar. Believe me, this is not the best UX. Ideally, a json response should only return data. Then the client can be built with any infrastructure (respond to native, iOS or Android native), and they have the same API endpoints.

Answer 3

Yes, you can dynamically create components in React Native based on the data you retrieve from the server.

However, if you want the application to check the latest JS code (including new components / views) without requiring updates through the application store, you could use something like a push code. https://microsoft.imtqy.com/code-push/

Your question is somewhat vague, so if I misunderstood, perhaps you could give an example of “information about all views”.

Answer 4

React docs (and, in addition, this can be done using ReactNative) show how to select the type of component at runtime :

 import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { const SpecificStory = components[props.storyType]; return <SpecificStory story={props.story} />; } 

That way, you just need to just walk through the JSON tree and just create the ReactNative components, using the components object as a mapping between the type defined in the JSON tree and their constructors.