Search Input
A search input is a text input that allows users to search for content in your app.
Pro component
Requires all-access to use the source code
import { ScrollView } from 'react-native';
import { SearchInput } from '@/components/nativewindui/SearchInput';
export default function SearchInputScreen() {
return (
<ScrollView contentContainerClassName="justify-center p-4" keyboardShouldPersistTaps="handled">
<SearchInput textContentType="none" autoComplete="off" />
</ScrollView>
);
}
Unlock All Pro Templates & Components
Elevate your app with powerful, native-feeling components and templates. Build faster with beautiful ready-to-use designs.
Usage
import { SearchInput } from '@/components/nativewindui/SearchInput';<SearchInput />Props
SearchInput
Inherits all the props from React Native's TextInput component.
| Prop | Type | Description |
|---|---|---|
| containerClassName | string | Class name to style the container of the search input. |
| iconContainerClassName | string | Class name to style the icon container within the search input. |
| cancelText | string | iOS only - Text to display on the cancel button. |
| iconColor | string | Color of the icon displayed in the search input. |
© Ronin Technologies LLC 2025