SearchInput

Search input component with debouncing support.
Extends TextInput, supporting all its props while adding search-specific behaviors and animations.

Usage

Search user



function SearchInputUsage() {
  return (
    <View>
      <SearchInput
        label="Search user"
        placeholder="eg. Blossom"
        size="medium"
      />
    </View>
  )
}

Animated Placeholder

Use animatedPlaceholderProps prop to show an animated text on the SearchInput

Search Label



Search 'Awesome'

Search Placeholder



Search 'Awesome'

function AnimatedSearchInput() {
  const placeholders = [
    `Search 'Awesome'`,
    `Search 'Blossom'`,
    `Search 'Rose'`,
    `Search 'Daisy'`,
    `Search 'Tulip'`,
    `Search 'Orchid'`,
  ]

  return (
    <View>
      <SearchInput
        label="Search Label"
        size="medium"
        animatedPlaceholderProps={{
          placeholders,
        }}
        left={<Icon name="search" size={24} />}
      />
      <SearchInput
        label="Search Placeholder"
        mode="flat"
        animatedPlaceholderProps={{
          placeholders,
        }}
      />
    </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>
  )
}

Size

Search user



Search user



Search user



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" />

      <SearchInput
        mode="flat"
        label="Search user"
        placeholder="eg. Blossom"
        size="small"
      />
      <SearchInput
        mode="flat"
        label="Search user"
        placeholder="eg. Blossom"
        size="medium"
      />
      <SearchInput
        mode="flat"
        label="Search user"
        placeholder="eg. Blossom"
        size="large"
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	TextInputProps	--	Inherits properties from TextInputProps
withClearIcon	boolean	false	Whether to show a clear (X) icon to reset the input at the right.Set it to true to show the clear icon.
onQueryChange	(query: string) => void	--	Callback when the search query changes.
debounceDelay	number	300	Delay in milliseconds to debounce the query change callback.
animatedPlaceholderProps	AnimatedPlaceholderProps	--	Customize the animated placeholder behavior with a slide-up animation.
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
placeholderComponent	ReactNode	--	Render a custom Placeholder component for the text input
caption	string	--	Caption text below the text input
error	string	--	TODO: TextInput will always render this and take the space to fix the flicker issue in show/hide errorError text in error status below caption text
labelStyle	StyleProp<TextStyle>	--	Label text style
captionStyle	StyleProp<TextStyle>	--	Caption text style
errorStyle	StyleProp<TextStyle>	--	Error text style
containerStyle	StyleProp<ViewStyle>	--	Container view style including label, caption & error
inputContainerStyle	StyleProp<ViewStyle>	--	Input container style including left, right section, custom placeholder and input text
inputTextStyle	StyleProp<TextStyle>	--	Input text style equivalent to react-native style for TextInput
disabled	boolean	--	Set to true to disable the button
shouldMockDisableState	boolean	--	Mock the disable behavior not the styling for popover contained inputs
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	Status of the component to apply color variants'primary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
size	BlossomSize	medium	Size of the component'small' | 'medium' | 'large'

AnimatedPlaceholderProps

Prop	Data Type	Default Value	Description
Extends	--	--	--
placeholders	string[]	--	An array of placeholder strings to animate between.
duration	number	500	Duration in milliseconds each placeholder is displayed before transitioning.
containerStyle	StyleProp<ViewStyle>	--	Custom styles for the container view of the placeholder.
textStyle	StyleProp<TextStyle>	--	Custom style for the placeholder text.
visible	boolean	true	Whether the placeholder is visible.Set it to false to hide the placeholder.