Open Maitsys opened 6 months ago
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"
}
}
}
}
}
}
}
}
@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.
💬 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