React Native Mantine › Data display
ColorSwatch
Color preview swatch
Import: import { ColorSwatch } from 'react-native-mantine';
Usage
import { ColorSwatch, Group } from 'react-native-mantine';
<Group spacing={8}>
<ColorSwatch color="#228be6" />
<ColorSwatch color="#fa5252" />
<ColorSwatch color="#40c057" />
</Group>
// With onPress and custom size
<ColorSwatch
color="#228be6"
size={40}
onPress={() => console.log('Color selected')}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color (required) | string | Swatch background color in any valid format (hex, rgb, rgba, etc.) | |
size | number | 25 | Width and height of the swatch in pixels |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | "xl" | Key of theme.radius or number to set border-radius in pixels |
children | React.ReactNode | ColorSwatch children, for example check icon or other overlay content | |
withShadow | boolean | true | Determines whether the swatch should have inner shadow |
onPress | () => void | Called when swatch is pressed - makes swatch interactive | |
style | ViewStyle | Additional styles to apply to the swatch container |