CODEWITHSUNDEEP
react-nativereact-navigation
sorinLates
sorinLates

Reputation: 245

How can I completely replace the react-navigation header?

I'm not simply trying to replace the left middle or right components, I want to replace the whole header so that I can use the Toolbar from react-native-material-ui.

Upvotes: 4

Views: 2749

Answers (1)

Alexey Kureev
Alexey Kureev

Reputation: 2067

You can override a header property in your navigationOptions:

import { HeaderBackButton } from 'react-navigation'

class Foo extends React.Component {
  static navigationOptions = (navigationProps) => {
    return {
      header: (props) => (
        <MyCustomHeaderContainer>
          <HeaderBackButton
            onPress={() => props.navigation.goBack(null)}
            tintColor="#fff"
          />
          <ContentComponent />
        </MyCustomHeaderContainer>
      ),
    };
  }
}

This assumes that Foo component is routable, e.g.

StackNavigator({
  Foo: {
    screen: Foo,
  },
});

UPD: You can also specify navigationOptions at the moment you create a navigator. This may be handy in some cases, e.g. nested navigation:

const MainNavigator = TabNavigator({...});

export default StackNavigator({
  MainNavigator: {
    screen: MainNavigator,
    navigationOptions: {
      header: navigationProps => <YourHeaderComponent {...navigationProps} />
    },
  }
}

Upvotes: 3

Related Questions