akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.27k stars 951 forks source link

Spinner with custom size #1278

Closed jadfls closed 3 years ago

jadfls commented 3 years ago

💬 Question

Assuming Spinner size="giant" is too small, how can I customize the spinner with a larger size? Ideally using direct width/height values?

UI Kitten and Eva version

Package Version
@eva-design/eva 2.0.0
@ui-kitten/components 5.0.0
smoove commented 3 years ago

Put this in your mapping.json

{
  "components": {
    "Spinner": {
      "meta": {
        "variantGroups": {
          "size": {
            "galactic": {
              "default": false
            }
          }
        }
      },
      "appearances": {
        "default": {
          "variantGroups": {
            "size": {
              "galactic": {
                "width": 64,
                "height": 64,
                "borderRadius": 32,
                "borderWidth": 5.5
              }
            }
          }
        }
      }
    }
  }
}

Then use like this:

<Spinner size="galactic" />
exlnt commented 3 years ago

I tried the above mapping file and I get this error:

Spinner: unsupported configuration. Check one of the following prop values: { "appearance": "default", "variants": [ "primary", "galactic" ], "states": [] }

artyorsh commented 3 years ago

@exlnt please make sure to follow this guide.