Render React Native Elements from JSON

Let's say your have this JSON:

const data = {
  "components": [
    {"name": "component1", props: {"hello": "world"}},
    {"name": "component2", props: {"color": "red"}},
  ]
}

Make your components and then reference them in an Object (map):

import Component1 from './Component1'
import Component2 from './Component2'

const COMPONENT_MAP = {
  component1: Component1,
  component2: Component2,
}

Then make your wrapper component:

const Wrapper = ({data}) => (
  <View>
    {data.components.map(({name, props}) => {
      const Component = COMPONENT_MAP[name]
      return <Component {...props} />
    }}
  </View>
)

Voilà :)

<Wrapper data={data} />