Pro component
Requires all-access to use the source code
npx expo install react-native-keyboard-controller
Wrap 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. |