How to dynamically render different components in React Native?

Question

JavaScript

For example, I have a store with the following data:
Page: [
{type: 'Button', label: 'Ok'},
{type: 'Card', label: 'News', Image: 'request...'},
{ type: 'TextInput', placeholder: 'Hello'}
];

These components need to be dynamically rendered on the page. But for example flatList renders components of only one type. How can this be implemented?

Answer 1

It's better to change the structure:

[
  {
    type: 'Button',
    props: {
      label: 'Ok'
    }
  },
  {
    type: 'Card',
    props: {
      label: 'News',
      Image: 'request...'
    }
  },
  {
    type: 'TextInput',
    props: {
      placeholder: 'Hello'
    }
  }
];

Then it will be possible to do this in the method render:

{{page.map(element => <element.type {...element.props} />)}}