React-native-paper: Feature Request: Use Appbar.Header with react-navigation

[smkhalsa]

It would be great if we could use Appbar.Header as a drop-in replacement for the standard Header component within a react-navigation StackNavigator.

Maybe we could use a customer StackNavigator, similar to:

https://github.com/react-navigation/react-navigation-material-bottom-tabs

[hugopretorius914]

This would be so great

[giautm]

I need this feature too. 😄

[cltsang]

You can replace the default one by returning the Appbar.Header when you call createStackNavigator. reference: https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig

const myAwesomeStackNavigator = createStackNavigator(
  {
    HomeScreen: {
      screen: HomeScreen
    }
  },
  {
    defaultNavigationOptions: ({ navigation }) => {
      return ({
        header: (
          <Appbar.Header>
            <Appbar.BackAction onPress={() => navigation.goBack()} />
          </Appbar.Header>
        ),
      })
    }
  }
);

The example app in this repo also does something similar, see here

As a drop-in replacement, it's good enough enough for my use cases.

[wobsoriano]

You can replace the default one by returning the Appbar.Header when you call createStackNavigator. reference: https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig

const myAwesomeStackNavigator = createStackNavigator(
  {
    HomeScreen: {
      screen: HomeScreen
    }
  },
  {
    defaultNavigationOptions: ({ navigation }) => {
      return ({
        header: (
          <Appbar.Header>
            <Appbar.BackAction onPress={() => navigation.goBack()} />
          </Appbar.Header>
        ),
      })
    }
  }
);

The example app in this repo also does something similar, see here

As a drop-in replacement, it's good enough enough for my use cases.

Very helpful. Thank you!

[netbull]

Basically it works, but not quite good for me.. When I switch tabs the screen content jumps most of the time, but if I set statusBarHeight it seems that it works correctly. I guess some calculations are made in SafeAreaView?

react-native-paper: 3.0.0-alpha3
react-native: 0.59.9
react-navigation: 3.11.1

[cltsang]

I experience that too.
May be related to #1035 ?

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[giautm]

keep-it-open

[Polombo98]

Please, reopen this issue

[tevonsb]

Seconded (or thirded) please reopen!

[kriscarle]

I worked around this by just disabling the header in react-navigation using headerMode: 'none' and then setting up Appbar in my screens.

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen
  },
  {
    initialRouteName: 'Home',
    headerMode: 'none'
  }
)

Then in a screen:

         <Appbar.Header>
          <Appbar.BackAction
            onPress={() => { this.props.navigation.goBack() }}
          />
          <Appbar.Content
            title='My screen'
            subtitle='my subtitle'
          />
        </Appbar.Header>

[faustinogagneten]

I'm experiencing this issue too. Using react navigation 5 and defining:

 <Stack.Navigator
  initialRouteName="Home"
  mode="modal"
  screenOptions={{
    headerShown: false,
    contentStyle: {
      backgroundColor: Colors.blanco,
    },
  }}
>

Te content is white in the transition from one screen to another. However, as appbar is in the content (not replacing the original header) I get a terrible animation because of that. I attach a video

Is there any workaround?

Thanks

[jaime-ez]

If this helps anyone, I have this setup that works without problems:

AppbarHeader.js

import * as React from 'react'
import { Appbar } from 'react-native-paper'
import { DrawerActions } from '@react-navigation/native'
import PropTypes from 'prop-types'

const AppbarHeader = ({ scene, navigation }) => {
  const { options } = scene.descriptor
  return (
    <Appbar.Header>
       <Appbar.Action icon='menu' onPress={() => (navigation.dispatch(DrawerActions.toggleDrawer()))} />
      <Appbar.Content title={options.headerTitle} />
    </Appbar.Header>
  )
}

AppbarHeader.propTypes = {
  navigation: PropTypes.object,
  scene: PropTypes.object
}

export default AppbarHeader

then in App.js:

<Stack.Navigator headerMode={'screen'} screenOptions={{ header: AppbarHeader }}>
  <Stack.Screen name='Main' component={MainContainer} />

Inside the main component I have a drawer navigator, thus the appbar menu button toggles the drawer.
I have no flickering issues, maybe those who have should do as suggested in the docs here:
https://reactnavigation.org/docs/stack-navigator#specify-a-height-in-headerstyle

[ThedathUMCG]

I worked around this by just disabling the header in react-navigation using headerMode: 'none' and then setting up Appbar in my screens.

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen
  },
  {
    initialRouteName: 'Home',
    headerMode: 'none'
  }
)

Then in a screen:

         <Appbar.Header>
          <Appbar.BackAction
            onPress={() => { this.props.navigation.goBack() }}
          />
          <Appbar.Content
            title='My screen'
            subtitle='my subtitle'
          />
        </Appbar.Header>

Thanks, this is exactly I was looking for.