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

[bottle-rocket-11]

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]

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>