React-native-ui-kitten: Adding a new color (accent/secondary color)

[ninobc]

I'm trying to figure out a way to add a new secondary/accent color to be part of my theme. By that I mean adding a new color similar to how the primary color is defined, and thus results in a new status variant which could be for called "secondary" or "accent". The reason why I want to try and add a new color is because say for example your brand consists of multiple colors, thus you can't rely on just 1 primary color and the rest of the semantic colors which are situational such as success and error colors. I want to be able to add more than 1 color to define my brand. Is that possible with the Eva Design System? I tried to read the docs but couldn't find anything related to adding multiple brand colors. Any help would be greatly appreciated!

[CostachescuCristinel]

There is no direct support for mutiple "primary" colors from UI Kitten itself..
However, you can use the custom mapping feature:
https://akveo.github.io/react-native-ui-kitten/docs/design-system/customize-mapping#customize-component-mapping

You can add a new variant group to the appearance property of the components, and override the colors you're interested into. For exammple, on a button, you may create this mapping:

{
    "components": {
        "Button": {
            "appearances": {
                "filled": {
                    "variantGroups": {
                        "status": {
                            "secondary": {
                                "backgroundColor": "#F00",
                                "textColor": "#FFF",
                            }
                        }
                    }
                }
            }
        }
    }
}

and use it as:

// status="primary" is defined by UI Kitten
<Button appearance="filled" status="primary" />
// status="secondary" comes from your custom mapping
<Button appearance="filled" status="secondary" />

[mateusduraes]

It is not working here as @CostachescuCristinel suggested.
It seems to me that new colors are not being accepted. If I try to override the primary color, it works. But creating a secondary color it doesn't work.

Follow my mapping.json

{
  "components": {
    "Button": {
      "appearances": {
        "filled": {
          "variantGroups": {
            "status": {
              "secondary": {
                "backgroundColor": "#693f41",
                "textColor": "#ffffff"
                }
              }
            }
          }
        }
      }
    }
  }
}

```jsx
// Renders with primary color

If I replace the following part (`secondary` to `primary`), then it works, how I should proceed?

```json
// ommited
            "status": {
              "primary": {
                "backgroundColor": "#693f41",
                "textColor": "#ffffff"
              }
            }
// ommited

<Button appearance="filled" status="secondary" /> // Renders with replaced color from mapping.json

In my app.tsx I have the following

// ommited
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components'
import * as eva from '@eva-design/eva'
import { default as theme } from './custom-theme.json'
import { default as mapping } from './mapping.json'

// ommited
<ApplicationProvider {...eva} customMapping={mapping} theme={{ ...eva.dark, ...theme }}>
  <NavigationContainer>
    <Routes />
  </NavigationContainer>
</ApplicationProvider>

Am I doing something wrong?

Some additional info:
I'm using:

    "expo": "~38.0.8",
    "@ui-kitten/components": "^5.0.0",
    "@ui-kitten/eva-icons": "^5.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",

Thanks

[artyorsh]

@mateusduraes you should also declare secondary variant group in meta to make it work. The component knows nothing about particular variant, appearance or state until it's not done.

[mateusduraes]

Hi @artyorsh, it works!
It makes total sense, thank you so much.

[cj]

@artyorsh Hi - I just tried that and got this error:

Button: unsupported configuration.
Check one of the following prop values: {
  "appearance": "filled",
  "variants": [
    "secondary",
    "medium"
  ],
  "states": []
}

This is what my mapping.json looks like:

{
  "components": {
    "Button": {
      "meta": {
        "variantGroups": {
          "status": {
            "secondary": {
              "default": false
            }
          }
        }
      },
      "appearances": {
        "filled": {
          "variantGroups": {
            "status": {
              "secondary": {
                "backgroundColor": "#3F2B1C",
                "textColor": "#FFF"
              }
            }
          }
        }
      }
    }
  }
}