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 { Stack } from 'expo-router';
import { View } from 'react-native';

import { SearchInput } from '~/components/nativewindui/SearchInput';

export default function SearchInputScreen() {
  return (
    <>
      <Stack.Screen options={{ title: 'Search Input' }} />
      <View className="justify-center p-4">
        <SearchInput textContentType="none" autoComplete="off" />
      </View>
    </>
  );
}

Unlock All Pro Screens & Components

Elevate your app with powerful, native-feeling components and templates. Build faster with beautiful ready-to-use designs.

Get all-access

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.

Search Input

Usage

Props

NativeWindUI