How to add both search bar and tab buttons in react-native using react-navigation

Question

I have a login Screen, when the user login they are brought to a screen similar to the one shown above.

In this screen, I have a tabNavigator containing tabs to 5 screens, similar to the one shown in the image above. It also has a header kinda thing with search bar in it. This header is only supposed to be shown in 4 of the 5 tabs and there is a different header i need to display in the 5th tab.

Is there a way to do this? I know i can add a view in 4 of the 5 tabs that render same header and a view in the 5th screen that renders a different header, But I was wondering if there is a way I could do this without having to render the same view in all the 4 tabs again and again.

P.S It should work on both iOS and Android

Answer 1

You can configure header of TabNavigator by navigationOptions:

const TabNav = TabNavigator({
  First: { screen: FirstPage },
  Second: { screen: SecondPage },
  Third: { screen: ThirdPage },
  Fourth: { screen: FourthPage },
  Fifth: { screen: FifthPage }
}, {
  navigationOptions: {
    header: <SearchHeader />
  }
})

And then custom navigationOptions in FifthPage:

class FifthPage extends Component {
  static navigationOptions = {
    header: <FifthPageHeader />
  }
}

I just created a demo on Expo Snack: https://snack.expo.io/rJDGpmPHZ, the 5th screen has a blue header, and the others have a red one.

In the document of TabNavigator at https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options, it hasn't list the header option, I think it will be pass to StackNavigator.