is there a 'fixed header' or 'sticky header' for react native?

Question

Is there a way to have fixed and permeant top-titlebar(I think it's called as Header?) for react native?

Almost like a status bar, it's always there. But it needs to be at the top (even before the 'header' from the react-navigation)

My plan was to put a global-search input there, so anywhere in the app you can search(Search content not affected by the screen that's presented at the moment. Pure global search always available.)

Is there a way to do this? I'm currently working with expo and react-navigation.

--- Edit

I add the screenshot of wireframe that shows what I meant. You'll notice that the Search bar stays at the top regardless the screen you are on. It's a global search bar.

-- Edit

I think I need to say this clearly. I'm trying to do this with ReactNavigation. I think I need to play with 'createAppContainer', or any create navigator function like 'createDrawerNavigator' and figure out a way to put in the fixed header with the navigate-able screens.

Answer 1

The react native's component FlastList has a property ListHeaderComponent for rendering a header and another one to stick it stickyHeaderIndices. This is exactly what you need.

In the ListHeaderComponent you will render your search field and with stickyHeaderIndices={[0]} will set it as a sticky header:

<FlatList
    data={ this.state.data }
    renderItem={({item}) =>  this.renderItem(item)}
    ListHeaderComponent={this.renderHeader}
    stickyHeaderIndices={[0]}
/>

Check out the working example.