0
181
ViewsOverride React navigation SearchBar to add Segmented Control
Is there a way to Override the header in react navigation with Search Bar and Segmented control using React navigation without writing a fully custom header? I want to use the inbuilt search component provided by react navigation but add a segmented control when search is tapped. Also want the native large title style in iOS.
React navigation has an option to specify Search Options which shows a SearchBar but I am not sure if I can override this functionality. Refer to screenshot below:
1 answers
Answer question0
the best I could do was
React.useEffect(() => {
navigation.setOptions({
headerTitle: () => {
return <SegmentedControl style={{ width: 200, alignSelf: 'center' }}
values={['One', 'Two']}
selectedIndex={selectedIndex}
onChange={(event) => setSelectedIndex(event.nativeEvent.selectedSegmentIndex)}
/>
},
});
});
this replaces the small header title with a segmented control. header animations and search bar still work.
later edit: i just realized, this is the native behavior as well (you can check it on ios in the recents tab, on the call screen). the segements replace the small header title :)
