It seems to be a pretty common task to have an application-wide search bar in the header. Unfortunately, I haven't found some ready recipes on how to accomplish it the right way. My solution was to place a custom SearchBox component in the React Native Navigation header using headerTitle:
static navigationOptions = ({navigation}) => {
headerTitle: () => (<SearchBox ... />)
It had its drawbacks, e.g. using "static" variables to pass state and behavior between the application and the component. But it worked so far. Now, after moving to RNN 4.1.1, it stopped working because of the specifics of how the header is implemented in the RNN:
TextInput now doesn't fill the header's width and doesn't handle the text input properly.
I am looking for a way to implement an application-wide search bar in RN, that features the following properties:
- it appears application-wide;
- its contents can be modified by a user, who wants to perform the search;
- when the user navigates back its contents conform to the shown page (e.g. if the user typed a query on page A and then got redirected to page B, so when they go back to the page A the search box contains "Page A" and not the query they typed);
- it supports suggestions (an also tricky thing to do).
Update
Ideally, I am looking for an answer that features the following aspects:
- be React Navigation v5 specific;
- tell how the search bar is implemented per se (e.g. passed as a component via header property in the above scenario);
- show how the search bar communicates with the core application in the following scenarios:
- a user submits a query;
- search box query gets updated independently from the application (e.g. the user taps a TouchableOpacity and gets navigated to a new page);
- how to ensure query consistency during the navigation. E.g. when the user goes back to the previous screen, the query in the search bar should match the screen contents.
- how to implement suggestions (users can see their options while typing; options are loaded online from the remote source).