On this page
The input widget component allows you to input color values in various formats, including RGB, HEX, HSL, HWB, and HSV. The component features a button that lets you cycle through these formats, making it easy to switch between them and find the one that suits your needs.
Props
The defaultFormat
prop determines the initial color format for the input widget component.
It accepts one of the following values: 'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'
disableAlphaChannel
This prop allows you to disable the alpha channel input. If set to true, the input widget will ignore the alpha channel and prevent users from setting the opacity of the selected color.
type: boolean
default: false
The formats
prop determines which color formats are included in the input widget component and the order they appear when cycling through them.
It accepts an array of the following values: 'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'
The inputStyle
prop sets the style for the InputText
components that make up the input fields for each color format.
It accepts a StyleProp<TextStyle>
object.
The inputProps
prop sets the props for the TextInput
components that make up the input fields for each color format.
It accepts an InputProps
object.
The inputTitleStyle
prop sets the style for the Text
component that displays the title for the input fields.
This title is located below the input fields and indicates which color format is currently displayed.
It accepts a StyleProp<TextStyle>
object.
containerStyle
The containerStyle
prop sets the style for the View
component that wraps around all the input fields and the cycle button.
It accepts a StyleProp<ViewStyle>
object.
iconColor
The iconColor
prop sets the color for the cycle button icon, which is an Image component that cycles through the available color formats when clicked.
It accepts a string
representing a color value.
iconStyle
The iconStyle
prop sets the style for the cycle button icon.
It accepts a StyleProp<ImageStyle>
object.