rn-dynamic-ui-render/example/json/test.json

A dynamic UI rendering engine for React Native

{
  "content": [
    {
      "name": "View",
      "props": {
        "style": {
          "padding": 16
        }
      },
      "content": [
        {
          "name": "View",
          "props": {
            "style": {
              "flexDirection": "row",
              "alignItems": "center",
              "marginTop": 40
            }
          },
          "content": [
            {
              "name": "Text",
              "props": {
                "textContent": "Hello",
                "style": {
                  "fontSize": "h1",
                  "fontWeight": "bold",
                  "color": "primary"
                }
              }
            },
            {
              "name": "Text",
              "props": {
                "visible": "usernameVisible",
                "textContent": "username",
                "style": {
                  "fontSize": "h1",
                  "fontWeight": "bold",
                  "color": "primary",
                  "marginLeft": 8
                }
              }
            }
          ]
        },
        {
          "name": "TextInput",
          "props": {
            "placeholder": "Please Enter your name",
            "value": "username",
            "onChangeText": "onChangeText",
            "style": {
              "borderColor": {
                "expression": "ternary",
                "condition": "{{username != ' '}}",
                "trueValue": "primary",
                "falseValue": "black"
              },
              "borderWidth": 1,
              "paddingHorizontal": 12,
              "marginTop": 16
            }
          }
        },
        {
          "name": "TouchableOpacity",
          "props": {
            "style": "buttonStyle",
            "onPress": "onContinuePress"
          },
          "content": [
            {
              "name": "Text",
              "props": {
                "textContent": "continue",
                "style": {
                  "color": "white"
                }
              }
            }
          ]
        }
      ]
    }
  ]
}