CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Pedro
Pedro

Reputation: 1178

React Navigation Extend Header

I am using React Navigation in a React Native project. I am wanting to add some extra content into the header.

I have created a custom header component and am using it in a Stack navigator like so:

navigationOptions: {
    header: CustomHeader
}

This is working fine but it is obviously replacing the entire header. I know I can access the screen title with props but I don't want to have to style this so it matches screens that don't use the custom header.

Is there anyway I can use a custom header but retain the existing title? Is it possible to 'slot' content into the header after the title or include the existing title (with device styles) into the customer header?

Upvotes: 1

Views: 1065

Answers (2)

kongkx
kongkx

Reputation: 108

You can import Header component from @react-navigation/elements, and then wrap it.

Example:

import { Header } from '@react-navigation/elements'

function CutsomHeader(props) {
  return (
    <View>
      <Header {...props.options} />
      <SearchBar />
    </View>
  )
}
``

Upvotes: 2

Auticcat
Auticcat

Reputation: 4489

You can simply use navigationOptions inside the screens you need the customHeader: 

static navigationOptions = ({ navigation }) => {
   //If you need do things
   return {
      header : <CustomHeader />
   } 
}

Upvotes: 0

Related Questions