How to get drawer over the header in react navigation?

Question

I am using react navigation. I want to show drawer over the header of the screen. Currently my header is not hiding below drawer when I open the drawer.

Answer 1

In my case, i make my own Header component and use it in each page i want. it enabled me to customize header with each page.

Absolutely it is the back door way and i hope other people have the exact answer of your question.

This is an example...

Home page:

export default class Home extends Component {
    render() {  
        return (
            

                


                
                   ...
                
            
        );
    }
}

Header Component:

export default class Header extends React.PureComponent {

  renderTitle = () => {
    if (this.props.title) {
      return (
        
          
            {this.props.title}
          
        
      )
    }
  }

  renderBack = () => {
    if (this.props.back) {
      return (
        
           {
              this.props.navigation.goBack()
            }}
            style={{ alignSelf: 'flex-start' }}>
            
          
        
      )
    }
  }


  render() {
    return (
      
        
          
            {this.renderBack()}
            {this.renderTitle()}
          
        
      
    )
  }
}