SearchInput
A Search component with debouncing support, internally it extends the TextInput and it's all props.
Usage
Search user
function SearchInputUsage() {
return (
<View>
<SearchInput
label="Search user"
placeholder="eg. Blossom"
size="medium"
/>
</View>
)
}
Size
Search user
Search user
Search user
function SearchInputSizes() {
return (
<View>
<SearchInput label="Search user" placeholder="eg. Blossom" size="small" />
<SearchInput
label="Search user"
placeholder="eg. Blossom"
size="medium"
/>
<SearchInput label="Search user" placeholder="eg. Blossom" size="large" />
</View>
)
}
Modes
Search user
Search user
function SearchInputModes() {
return (
<View>
<SearchInput label="Search user" placeholder="eg. Blossom" mode="flat" />
<SearchInput
label="Search user"
placeholder="eg. Blossom"
size="medium"
mode="outlined"
/>
</View>
)
}
Props
| Prop | Data Type | Default Value | Description |
|---|---|---|---|
| Extends | TextInputProps | -- | Inherits properties from TextInputProps |
| withClearIcon | boolean | -- | -- |
| onQueryChange | (query: string) => void | -- | -- |
| debounceDelay | number | -- | -- |
| mode | "outlined" | "flat" | outlined | Control the different modes of the text input |
| dense | boolean | -- | Have a denser background in the text input |
| label | string | -- | Label text above the input |
| placeholder | string | -- | Placeholder for the text input |
| caption | string | -- | Caption text below the text input |
| error | string | -- | Error text in error status below caption text |
| labelStyle | StyleProp<TextStyle> | -- | Label text style |
| placeholderStyle | StyleProp<TextStyle> | -- | Placeholder text style |
| captionStyle | StyleProp<TextStyle> | -- | Caption text style |
| errorStyle | StyleProp<TextStyle> | -- | Error text style |
| containerStyle | StyleProp<ViewStyle> | -- | Container view style |
| inputStyle | StyleProp<ViewStyle> | -- | Input box style |
| textStyle | StyleProp<TextStyle> | -- | Input text style equivalent to react-native style for TextInput |
| disabled | boolean | -- | Set to true to disable the button |
| left | ReactNode | -- | Render Icon/JSX on the left of the button |
| right | ReactNode | -- | Render Icon/JSX on the right of the button |
| status | BlossomStatus | primary | -- |
| size | BlossomSize | medium | -- |