CODEWITHSUNDEEP
user-interfacedynamicreact-nativeruntimegenerator
Majid Vesal
Majid Vesal

Reputation: 21

React native dynamic runtime ui creation

In my application, I need to create a simple dynamic ui which has to be created from a content that is coming from server. is there any way to render a view from a string content?

Upvotes: 2

Views: 734

Answers (1)

Asfandyar Peerzada
Asfandyar Peerzada

Reputation: 96

I am rendering different UI controls on screen, based on type attribute that I am getting from the server. I am using ListView as following 

<ListView
enableEmptySections = {true}
style={{flex:1}}
dataSource={ds.cloneWithRows(data)}
renderRow=
{ 
(data, secId, rowId, rowMap) => 
    {
 return this.renderRow(data, secId, rowId, rowMap);
    }
}
/>

The data that I get from server is in the following format

[{ type: 'Text',label: 'label1'},{type: 'Checkbox',label: 'label2'}];

in the renderRow method, based on the data type I render different UI Controls 

 renderRow(data, secId, rowId, rowMap) {
  if (data.type=='Text') 
  {
    var contentRow = <TextInput style={styles.InputRowBox} />;
    return (contentRow);
  }
  else if (data.type=='CheckBox') 
  {
    var notificationRow = <CheckBox style={styles.checkboxStyle} />
    return (notificationRow);
  }
}

Note : For the Checkbox control to work, you will require to add checkbox package, I added from this link

Upvotes: 1

Related Questions