react-native-ui-lib/src/components/colorPalette/ColorPalette.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "ColorPalette",
  "category": "form",
  "description": "A component for displaying a color palette",
  "note": "This is a screen width component",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true"
  ],
  "props": [
    {
      "name": "colors",
      "type": "string[]",
      "description": "Array of colors to render in the palette"
    },
    {
      "name": "value",
      "type": "string",
      "description": "The value of the selected swatch"
    },
    {
      "name": "usePagination",
      "type": "boolean",
      "description": "Whether to use pagination when number of colors exceeds the number of rows",
      "default": "true"
    },
    {
      "name": "loop",
      "type": "boolean",
      "description": "Whether the colors pagination scrolls in a loop",
      "default": "true"
    },
    {
      "name": "numberOfRows",
      "type": "number",
      "description": "The number of color rows from 2 to 5",
      "default": "3"
    },
    {
      "name": "animatedIndex",
      "type": "number",
      "description": "The index of the item to animate at first render",
      "note": "Default is last"
    },
    {
      "name": "onValueChange",
      "type": "(value: string, colorInfo: ColorInfo) => void",
      "description": "Invoked once when value changes by selecting one of the swatches in the palette"
    },
    {
      "name": "swatchStyle",
      "type": "ViewStyle",
      "description": "Style to pass all the ColorSwatches in the palette"
    },
    {
      "name": "containerWidth",
      "type": "number",
      "description": "The container margins"
    },
    {
      "name": "containerStyle",
      "type": "ViewStyle",
      "description": "Component's container style"
    },
    {
      "name": "style",
      "type": "ViewStyle",
      "description": "Component's style"
    },
    {
      "name": "testID",
      "type": "string",
      "description": "The test id for e2e tests"
    },
    {
      "name": "backgroundColor",
      "type": "string",
      "description": "The ColorPalette's background color"
    }
  ],
  "snippet": [
    "function Example(props) {",
    "  const [value, setValue] = useState(Colors.yellow30);",
    "  return (",
    "    <View flex padding-s5 gap-s4>",
    "      <ColorPalette",
    "        colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]}",
    "        value={value}",
    "        onValueChange={setValue}",
    "      />",
    "    </View>",
    "  );",
    "}"
  ],
  "docs": {
    "hero": {
      "title": "ColorPalette",
      "description": "markdown:Our Color Palette is basically an arrangement of Color Swatches representing various colors and styles.  \nIn ColorPalette only a single color swatch can be selected.",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_cover.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "list",
            "items": [
              {
                "title": "Color Palette large (multiple rows):",
                "description": "markdown:In some cases, product or flow will benefit from a bigger palette.  \nThis type of palette is navigated with pagination.  \nMinimum number of rows is 2 and maximum is 5.   \nThe palette adapts to the screen width, with a minimum spacing of S5 between colors swatches.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_large.png"
                  }
                ]
              },
              {
                "title": "Color Palette small (single row):",
                "description": "markdown:In screens with a limited space a smaller palette can be used.  \nIf the amount of color swatches is larger than the screen width, the Color Palette becomes scrollable.  \nTapping the “+” button will open the Color Picker dialog, allowing user to create a custom color.  \nWhen Color Palette is scrollable, “add” button will be sticky to screen left.  \nAfter the custom color is created, it’s added as a Color Swatch to the right of the “add” button, and selected as the main color.  \nIf the selected color is outside of the view port when screen is loaded, the palette will be scrolled to the primary swatch.  \nTransparent swatches are fixed to the left of other (regular) Color Swatches.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_small.png"
                  }
                ]
              }
            ],
            "layout": "horizontal",
            "title": "Palette Types",
            "description": "Color Palette can be a single row of Color Swatches or have multiple rows:"
          },
          {
            "type": "section",
            "layout": "horizontal",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_spec.png"
              }
            ],
            "title": "Spec"
          }
        ]
      }
    ]
  }
}