Post
Ask Question
Murali krishna Ande

Murali krishna Ande

  • NA
  • 57
  • 51.8k

How to create a React Native component using JSON Schema

Jan 11 2021 6:11 AM
I am trying to create a component using react-native from below JSON format. And this has to be done with-out using any third party components. 
  1. {  
  2.  "properties": {  
  3.       "taxDetails": {  
  4.         "type": "array",  
  5.         "items": {  
  6.           "properties": {  
  7.             "keyValue": {  
  8.               "type": "string"  
  9.             },  
  10.             "keyName": {  
  11.               "type": "string"  
  12.             },  
  13.             "index": {  
  14.               "type": "number"  
  15.             }  
  16.           }  
  17.         }  
  18.       },  
  19.       "upperBody": {  
  20.         "type": "array",  
  21.         "items": {  
  22.           "properties": {  
  23.             "keyValue": {  
  24.               "type": "string"  
  25.             },  
  26.             "keyName": {  
  27.               "type": "string"  
  28.             },  
  29.             "index": {  
  30.               "type": "number"  
  31.             }  
  32.           }  
  33.         }  
  34.       },  
  35.       "bodyItems": {  
  36.         "type": "object",  
  37.         "properties": {  
  38.           "itemDetails": {  
  39.             "type": "array",  
  40.             "items": {  
  41.               "properties": {  
  42.                 "ItemValue": {  
  43.                   "type": "string"  
  44.                 },  
  45.                 "ItemPrice": {  
  46.                   "type": "string"  
  47.                 },  
  48.                 "ItemQty": {  
  49.                   "type": "string"  
  50.                 },  
  51.                 "ItemName": {  
  52.                   "type": "string"  
  53.                 }  
  54.               }  
  55.             }  
  56.           },  
  57.           "itemCount": {  
  58.             "type": "string"  
  59.           }  
  60.         }  
  61.       },  
  62.       "paymentDetails": {  
  63.         "type": "object",  
  64.         "properties": {  
  65.           "paymentMeta": {  
  66.             "type": "array",  
  67.             "items": {  
  68.               "properties": {  
  69.                 "keyValue": {  
  70.                   "type": "string"  
  71.                 },  
  72.                 "keyName": {  
  73.                   "type": "string"  
  74.                 },  
  75.                 "index": {  
  76.                   "type": "number"  
  77.                 }  
  78.               }  
  79.             }  
  80.           },  
  81.           "paymentType": {  
  82.             "type": "string"  
  83.           }  
  84.         }  
  85.       }  
  86.     }  
  87.   },    
  88. }  
By using the above JSON schema, I have to create a template like below. 
  1. <View>    
  2.    <Text>{item.keyName}</Text>    
  3.    <Text>{item.keyValue}</Text>    
  4.    <Text>{item.index}</Text>    
  5. </View>    
  6.     
  7. <View>    
  8.    <Text>{item.ItemName}</Text>    
  9.    <Text>{item.ItemPrice}</Text>    
  10.    <Text>{item.ItemQty}</Text>    
  11.    <Text>{item.ItemValue}</Text>    
  12. </View>  
If I create a template like that, I can show the values by using other JSON. So can someone please help me in creating a template like above.

Answers (1)