callstack / callstack/react-native-paper
Using AppBar with MaterialBottomTabNavigator
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
Bottom Tab Navigators do not include the `header` property in `screenOptions` preventing a default `AppBar` from being included.
```
Type '{ header: ({ navigation, route, options, back }: { navigation: any; route: any; options: any; back: any; }) => Element; }' is not assignable to type 'MaterialBottomTabNavigationOptions | ((props: { route: RouteProp; navigation: any; }) => MaterialBottomTabNavigationOptions) | undefined'.
Object literal may only specify known properties, and 'header' does not exist in type 'MaterialBottomTabNavigationOptions | ((props: { route: RouteProp; navigation: any; }) => MaterialBottomTabNavigationOptions)'.ts(2322)
types.d.ts(30, 5): The expected type comes from property 'screenOptions' which is declared here on type 'IntrinsicAttributes & Omit & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: MaterialBottomTabNavigationOptions | ... 1 more ... | undefined; } & DefaultRouterOptions & { ...; } & Partial<...>, "children" | ... ...'
```
### Expected behaviour
Clear documentation is provided that details how to include a default header (i.e. an `AppBar`) when using `createMaterialBottomTabNavigator`.
### How to reproduce?
```
const Tab = createMaterialBottomTabNavigator();
{
const title = getHeaderTitle(options, route.name);
return (
);
},
}}>
```
### See Also
https://callstack.github.io/react-native-paper/docs/guides/react-navigation
https://callstack.github.io/react-native-paper/docs/guides/bottom-navigation
### Your Environment
| software | version
| --------------------- | -------
| react-native | 0.72.5
| react-native-paper | 5.10.6
| node | 18.17.1
| npm or yarn | 10.1.0
| expo sdk | 49.0.11
Contributor guide
Assessment
This issue has not been assessed yet.