Is it possible to dynamically render components in React Native?

Question

Is it possible to dynamically create components and render them in React-Native? I want to read data from a JSON file and render it to an empty screen. This JSON describes the screen that has 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
        }
    }]
}

Answer 1

For your requirement, first of all you have to import all the required element manually to the page, then you need to create a state with blank array and then call loop through the component did mount or anywhere you want to render the data.

Inside the loop, create conditions based on element and pass dynamic value whatever you're getting from the json file.

var data = {
    "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
        }
    }]
}

import {
    View,
    TextInput,
    Button,
} from 'react-native';


constructor(props){
    super(props);
    this.state = {
        itemstorender: [],
    }
}

componentDidMount() {
    this.renderData();
}

renderData = () => {
    for(var i = 0; i<data.subviews.length; i++){
        if(data.subviews[i].type == "text"){
            this.setState({
                itemstorender: this.state.itemstorender.concat([
                    <TextInput
                        style = {data.subviews[i].styles}
                        placeholder = data.subviews[i].fields.text
                    />
                ])
            })
        }else if(data.subviews[i].type == "button"){
            this.setState({
                itemstorender: this.state.itemstorender.concat([
                    <Button
                      onPress={alert('ok')}
                      title=data.subviews[i].fields.text
                    />
                ])
            })
        }
    }
}

render() {
    return (
        <View>
            { this.state.itemstorender }
        </View>
    )
}