Custom Component Mapping not applying correctly

Author: AngelRmrzCreated Nov 5, 2024Updated Nov 5, 2024

¿How to correctly use Custom Component Mapping?

Im facing several issues trying to use a custom component mapping, i first base on the documentation but it doesnt works, here is my currently not working approach

The IconButton.tsx file

bash

import React from 'react';
import {EvaProp, withStyles} from '@ui-kitten/components';
import {TouchableOpacity, TouchableOpacityProps} from 'react-native';

interface IconButtonProps extends TouchableOpacityProps {
  eva?: EvaProp;
}

const IconButton: React.FC<IconButtonProps> = ({eva, style, ...props}) => {
  return <TouchableOpacity style={[eva?.style, style]} {...props} />;
};

export default withStyles(IconButton);

Here is my mapping.json file

"IconButton": {
      "meta": {
        "parameters": {
          "width": {
            "type": "number"
          },
          "height": {
            "type": "number"
          },
          "borderRadius": {
            "type": "number"
          },
          "backgroundColor": {
            "type": "string"
          }
        }
      },
      "appearances": {
        "filled": {
          "mapping": {
            "width": 40,
            "height": 40,
            "borderRadius": 20,
            "backgroundColor": "color-white"
          }
        }
      }
    }

I got this error log on the simulator

Simulator Screenshot - iPhone Xs - 2024-11-05 at 15 32 53

I appreciate any comments here for this approach or another.

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.2.0
@ui-kitten/components	^5.3.1

Source: akveo/react-native-ui-kitten

View original on GitHub View discussion on GitHub