How to customize Input element through mapping.json?

[Maitsys]

💬 Question

How to customize the Input element through mapping.json.
The documentation does not have much information on implementation.
Can you please give some examples? I want to give border-radius

[danya0365]

Look at my example project https://github.com/danya0365/expo-react-native-uikitten-with-auth-middleware

in custom mapping file constants/app-mapping-eva.json

you can put all content from node_modules/@eva-design/eva/mapping.json

for example

{
  "components": {
    "Input": {
      "meta": {
        "scope": "all",
        "parameters": {
          "paddingVertical": {
            "type": "number"
          },
          "paddingHorizontal": {
            "type": "number"
          },
          "minHeight": {
            "type": "number"
          },
          "borderRadius": {
            "type": "number"
          },
          "borderWidth": {
            "type": "number"
          },
          "borderColor": {
            "type": "string"
          },
          "backgroundColor": {
            "type": "string"
          },
          "textMarginHorizontal": {
            "type": "number"
          },
          "textFontFamily": {
            "type": "string"
          },
          "textFontSize": {
            "type": "number"
          },
          "textFontWeight": {
            "type": "string"
          },
          "textColor": {
            "type": "string"
          },
          "placeholderColor": {
            "type": "string"
          },
          "iconWidth": {
            "type": "number"
          },
          "iconHeight": {
            "type": "number"
          },
          "iconMarginHorizontal": {
            "type": "number"
          },
          "iconTintColor": {
            "type": "string"
          },
          "labelColor": {
            "type": "string"
          },
          "labelFontFamily": {
            "type": "string"
          },
          "labelFontSize": {
            "type": "number"
          },
          "labelFontWeight": {
            "type": "string"
          },
          "labelMarginBottom": {
            "type": "number"
          },
          "captionColor": {
            "type": "string"
          },
          "captionFontFamily": {
            "type": "string"
          },
          "captionFontSize": {
            "type": "number"
          },
          "captionFontWeight": {
            "type": "string"
          }
        },
        "appearances": {
          "default": {
            "default": true
          }
        },
        "variantGroups": {
          "status": {
            "basic": {
              "default": true
            },
            "primary": {
              "default": false
            },
            "success": {
              "default": false
            },
            "info": {
              "default": false
            },
            "warning": {
              "default": false
            },
            "danger": {
              "default": false
            },
            "control": {
              "default": false
            }
          },
          "size": {
            "small": {
              "default": false
            },
            "medium": {
              "default": true
            },
            "large": {
              "default": false
            }
          }
        },
        "states": {
          "hover": {
            "default": false,
            "priority": 0,
            "scope": "all"
          },
          "disabled": {
            "default": false,
            "priority": 1,
            "scope": "all"
          },
          "focused": {
            "default": false,
            "priority": 2,
            "scope": "all"
          }
        }
      },
      "appearances": {
        "default": {
          "mapping": {
            "paddingHorizontal": 8,
            "textMarginHorizontal": 8,
            "textFontFamily": "text-font-family",
            "iconWidth": 24,
            "iconHeight": 24,
            "iconMarginHorizontal": 8,
            "labelMarginBottom": 4,
            "labelFontSize": "text-label-font-size",
            "labelFontWeight": "text-label-font-weight",
            "labelFontFamily": "text-label-font-family",
            "captionFontSize": "text-caption-1-font-size",
            "captionFontWeight": "text-caption-1-font-weight",
            "captionFontFamily": "text-caption-1-font-family"
          },
          "variantGroups": {
            "status": {
              "basic": {
                "borderColor": "border-basic-color-4",
                "backgroundColor": "background-basic-color-2",
                "textColor": "text-basic-color",
                "labelColor": "text-hint-color",
                "captionColor": "text-hint-color",
                "placeholderColor": "text-hint-color",
                "iconTintColor": "text-hint-color",
                "state": {
                  "focused": {
                    "borderColor": "color-primary-default",
                    "backgroundColor": "background-basic-color-1",
                    "iconTintColor": "text-primary-color"
                  },
                  "hover": {
                    "borderColor": "border-basic-color-4",
                    "backgroundColor": "background-basic-color-3"
                  },
                  "disabled": {
                    "borderColor": "border-basic-color-4",
                    "backgroundColor": "background-basic-color-2",
                    "textColor": "text-disabled-color",
                    "labelColor": "text-disabled-color",
                    "captionColor": "text-disabled-color",
                    "placeholderColor": "text-disabled-color",
                    "iconTintColor": "text-disabled-color"
                  }
                }
              },
              "primary": {
                "borderColor": "color-primary-default",
                "backgroundColor": "background-basic-color-2",
                "textColor": "text-basic-color",
                "labelColor": "text-hint-color",
                "captionColor": "text-primary-color",
                "placeholderColor": "text-hint-color",
                "iconTintColor": "text-primary-color",
                "state": {
                  "focused": {
                    "borderColor": "color-primary-focus",
                    "backgroundColor": "background-basic-color-1",
                    "iconTintColor": "text-primary-focus-color"
                  },
                  "hover": {
                    "borderColor": "color-primary-hover",
                    "backgroundColor": "background-basic-color-3"
                  },
                  "disabled": {
                    "borderColor": "border-basic-color-4",
                    "backgroundColor": "background-basic-color-2",
                    "textColor": "text-disabled-color",
                    "labelColor": "text-disabled-color",
                    "captionColor": "text-disabled-color",
                    "placeholderColor": "text-disabled-color",
                    "iconTintColor": "text-disabled-color"
                  }
                }
              },
              "success": {
                "borderColor": "color-success-default",
                "backgroundColor": "background-basic-color-2",
                "textColor": "text-basic-color",
                "labelColor": "text-hint-color",
                "captionColor": "text-success-color",
                "placeholderColor": "text-hint-color",
                "iconTintColor": "text-success-color",
                "state": {
                  "focused": {
                    "borderColor": "color-success-focus",
                    "backgroundColor": "background-basic-color-1",
                    "iconTintColor": "text-success-focus-color"
                  },
                  "hover": {
                    "borderColor": "color-success-hover",
                    "backgroundColor": "background-basic-color-3"
                  },
                  "disabled": {
                    "borderColor": "border-basic-color-4",
                    "backgroundColor": "background-basic-color-2",
                    "textColor": "text-disabled-color",
                    "labelColor": "text-disabled-color",
                    "captionColor": "text-disabled-color",
                    "placeholderColor": "text-disabled-color",
                    "iconTintColor": "text-disabled-color"
                  }
                }
              },
              "info": {
                "borderColor": "color-info-default",
                "backgroundColor": "background-basic-color-2",
                "textColor": "text-basic-color",
                "labelColor": "text-hint-color",
                "captionColor": "text-info-color",
                "placeholderColor": "text-hint-color",
                "iconTintColor": "text-info-color",
                "state": {
                  "focused": {
                    "borderColor": "color-info-focus",
                    "backgroundColor": "background-basic-color-1",
                    "iconTintColor": "text-info-focus-color"
                  },
                  "hover": {
                    "borderColor": "color-info-hover",
                    "backgroundColor": "background-basic-color-3"
                  },
                  "disabled": {
                    "borderColor": "border-basic-color-4",
                    "backgroundColor": "background-basic-color-2",
                    "textColor": "text-disabled-color",
                    "labelColor": "text-disabled-color",
                    "captionColor": "text-disabled-color",
                    "placeholderColor": "text-disabled-color",
                    "iconTintColor": "text-disabled-color"
                  }
                }
              },
              "warning": {
                "borderColor": "color-warning-default",
                "backgroundColor": "background-basic-color-2",
                "textColor": "text-basic-color",
                "labelColor": "text-hint-color",
                "captionColor": "text-warning-color",
                "placeholderColor": "text-hint-color",
                "iconTintColor": "text-warning-color",
                "state": {
                  "focused": {
                    "borderColor": "color-warning-focus",
                    "backgroundColor": "background-basic-color-1",
                    "iconTintColor": "text-warning-focus-color"
                  },
                  "hover": {
                    "borderColor": "color-warning-hover",
                    "backgroundColor": "background-basic-color-3"
                  },
                  "disabled": {
                    "borderColor": "border-basic-color-4",
                    "backgroundColor": "background-basic-color-2",
                    "textColor": "text-disabled-color",
                    "labelColor": "text-disabled-color",
                    "captionColor": "text-disabled-color",
                    "placeholderColor": "text-disabled-color",
                    "iconTintColor": "text-disabled-color"
                  }
                }
              },
              "danger": {
                "borderColor": "color-danger-default",
                "backgroundColor": "background-basic-color-2",
                "textColor": "text-basic-color",
                "labelColor": "text-hint-color",
                "captionColor": "text-danger-color",
                "placeholderColor": "text-hint-color",
                "iconTintColor": "text-danger-color",
                "state": {
                  "focused": {
                    "borderColor": "color-danger-focus",
                    "backgroundColor": "background-basic-color-1",
                    "iconTintColor": "text-danger-focus-color"
                  },
                  "hover": {
                    "borderColor": "color-danger-hover",
                    "backgroundColor": "background-basic-color-3"
                  },
                  "disabled": {
                    "borderColor": "border-basic-color-4",
                    "backgroundColor": "background-basic-color-2",
                    "textColor": "text-disabled-color",
                    "labelColor": "text-disabled-color",
                    "captionColor": "text-disabled-color",
                    "placeholderColor": "text-disabled-color",
                    "iconTintColor": "text-disabled-color"
                  }
                }
              },
              "control": {
                "borderColor": "color-basic-control-transparent-500",
                "backgroundColor": "color-basic-control-transparent-300",
                "textColor": "text-control-color",
                "labelColor": "text-control-color",
                "captionColor": "text-control-color",
                "placeholderColor": "text-control-color",
                "iconTintColor": "text-control-color",
                "state": {
                  "focused": {
                    "borderColor": "color-control-transparent-focus-border",
                    "backgroundColor": "color-basic-control-transparent-500",
                    "iconTintColor": "text-control-color"
                  },
                  "hover": {
                    "borderColor": "color-control-transparent-hover-border",
                    "backgroundColor": "color-basic-control-transparent-400"
                  },
                  "disabled": {
                    "borderColor": "color-control-transparent-disabled-border",
                    "backgroundColor": "color-control-transparent-disabled",
                    "textColor": "text-control-color",
                    "labelColor": "text-control-color",
                    "captionColor": "text-control-color",
                    "placeholderColor": "text-control-color",
                    "iconTintColor": "text-control-color"
                  }
                }
              }
            },
            "size": {
              "small": {
                "minHeight": "size-small",
                "borderRadius": "border-radius",
                "borderWidth": "border-width",
                "paddingVertical": 3,
                "textFontSize": "text-subtitle-2-font-size",
                "textFontWeight": "normal"
              },
              "medium": {
                "minHeight": "size-medium",
                "borderRadius": "border-radius",
                "borderWidth": "border-width",
                "paddingVertical": 7,
                "textFontSize": "text-subtitle-1-font-size",
                "textFontWeight": "normal"
              },
              "large": {
                "minHeight": "size-large",
                "borderRadius": "border-radius",
                "borderWidth": "border-width",
                "paddingVertical": 11,
                "textFontSize": "text-subtitle-1-font-size",
                "textFontWeight": "normal"
              }
            }
          }
        }
      }
    }
  }
}

[greenfrvr]

@danya0365 thanks for an example. BTW, If I'm not mistaken in your custom mapping json you don't have to add meta part if you're not overriding anything. If you just want to change exact existing property you can just override it directly.

@Maitsys there is a small example in our documentation, you can check it here.