Pro component
Requires all-access to use the source code
npx expo install react-native-keyboard-controllerWrap the _layout.tsx in <KeyboardProvider> with the 2 boolean props of statusBarTranslucent and navigationBarTranslucent
import * as React from 'react';
import { Pressable, ScrollView, View } from 'react-native';
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
import Animated, { FadeIn, ZoomOut } from 'react-native-reanimated';
import { useColorScheme } from '@/lib/useColorScheme';
import { Button } from '@/components/nativewindui/Button';
import { Icon } from '@/components/nativewindui/Icon';
import { Text } from '@/components/nativewindui/Text';
import { AdaptiveSearchHeader } from '../AdaptiveSearchHeader';
import { AdaptiveSearchBarMethods } from '../AdaptiveSearchHeader/types';
export default function AdaptiveHeaderScreen() {
const { colors } = useColorScheme();
const searchBarRef = React.useRef<AdaptiveSearchBarMethods>(null);
function onTryNewSearch() {
searchBarRef.current?.focus();
}
return (
<>
<AdaptiveSearchHeader
iosTitle="Adaptive Search Header"
iosIsLargeTitle={false}
shadowVisible={false}
backgroundColor="transparent"
iosBackButtonTitle="Back"
searchBar={{
ref: searchBarRef,
iosCancelButtonText: 'Cancel',
materialRightView() {
return (
<Animated.View entering={FadeIn} exiting={ZoomOut}>
<Button variant="plain" size="icon">
<Icon size={22} name="gearshape" color={colors.grey} />
</Button>
</Animated.View>
);
},
content: (
<KeyboardAvoidingView
behavior="padding"
className="ios:bg-background flex-1 items-center justify-center gap-0.5 p-4">
<Text variant="title1" className="font-bold">
Type anything
</Text>
<View className="flex-row items-center">
<Text variant="callout" className="text-muted-foreground text-center">
This is a demo of the AdaptiveSearchHeader component.
</Text>
</View>
</KeyboardAvoidingView>
),
}}
/>
<ScrollView contentContainerClassName="flex-1 items-center justify-center">
<Text variant="title1" className="font-bold">
No Results
</Text>
<View className="flex-row flex-wrap items-center">
<Text variant="callout" className="text-muted-foreground text-center">
There were no results.{' '}
</Text>
<Pressable onPress={onTryNewSearch}>
<Text variant="callout" className="text-muted-foreground text-center">
Try a new search.
</Text>
</Pressable>
</View>
</ScrollView>
</>
);
}
Unlock All Pro Templates & Components
Elevate your app with powerful, native-feeling components and templates. Build faster with beautiful ready-to-use designs.
The Adaptive Search Header can only be used with screens that are part of a Stack Navigator.
If your screen is part of a different type of navigation (like a Tab or Drawer Navigator), you’ll need to place that screen inside a Stack Navigator to use the Adaptive Search Header.
For help on how to nest navigators, check out Expo's documentation.
import { AdaptiveSearchHeader } from '@/components/nativewindui/AdaptiveSearchHeader'; <AdaptiveSearchHeader iosTitle="Adaptive Search Header" />AdaptiveSearchHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| iosIsLargeTitle | boolean | false | Whether the iOS large title style is used. |
| iosBackButtonMenuEnabled | boolean | If the iOS back button menu is enabled. | |
| iosBackButtonTitle | string | The title of the iOS back button. | |
| iosBackButtonTitleVisible | boolean | Whether the iOS back button title is visible. | |
| iosBackVisible | boolean | Whether the iOS back button is visible. | |
| iosBlurEffect | 'systemMaterial' | 'none' | HeaderOptions['headerBlurEffect'] | 'systemMaterial' | The blur effect used on iOS. |
| iosTitle | string | The title of the header on iOS. | |
| materialUseSafeAreaTop | boolean | true | Whether to use the safe area top on Android. |
| shadowVisible | boolean | Whether the shadow is visible. iOS requires iosBlurEffect to be set to "none". | |
| leftView | HeaderOptions["headerLeft"] | Left view element for the header. | |
| rightView | HeaderOptions["headerRight"] | Right view element for the header. | |
| shown | boolean | Whether the header is shown. | |
| backgroundColor | string | Background color of the header. | |
| screen | ScreenOptions | Screen options to apply to the header. | |
| searchBar | object | Options for the search bar. | |
| searchBar.iosCancelButtonText | string | Text for the iOS cancel button in the search bar. | |
| searchBar.iosHideWhenScrolling | boolean | Whether the iOS search bar hides when scrolling. | |
| searchBar.iosTintColor | string | Tint color for the iOS search bar. | |
| searchBar.materialRightView | HeaderOptions["headerRight"] | Right view element for the search bar on Android. | |
| searchBar.materialBlurOnSubmit | boolean | Whether the search bar blurs on submit for Android. | |
| searchBar.materialOnSubmitEditing | ((e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void) | Callback triggered on submit editing for the Android search bar. | |
| searchBar.autoCapitalize | NativeStackNavigationSearchBarOptions["autoCapitalize"] | Auto-capitalize behavior for the search bar input. | |
| searchBar.inputType | NativeStackNavigationSearchBarOptions["inputType"] | Input type for the search bar. | |
| searchBar.onBlur | () => void | Callback triggered when the search bar loses focus. | |
| searchBar.onCancelButtonPress | () => void | Callback triggered when the cancel button is pressed in the search bar. | |
| searchBar.onChangeText | (text: string) => void | Callback triggered when the text changes in the search bar. | |
| searchBar.onFocus | () => void | Callback triggered when the search bar gains focus. | |
| searchBar.onSearchButtonPress | () => void | Callback triggered when the search button is pressed in the search bar. | |
| searchBar.placeholder | string | Placeholder text for the search bar. | |
| searchBar.ref | React.RefObject<AdaptiveSearchBarRef> | Ref object for the search bar. | |
| searchBar.textColor | string | Text color for the search bar. | |
| searchBar.content | React.ReactNode | Content to be rendered inside the search bar. |