callstack / callstack/react-native-paper

Using AppBar with MaterialBottomTabNavigator

Open
#4,098 1 comment 0 reactions 0 assignees View on GitHub
bug
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

Open the contributing guide

Research direction

Start with the React Navigation guide and the bottom-navigation guide linked in the issue. Document how createMaterialBottomTabNavigator can include a default AppBar header, addressing the shown TypeScript error and making the expected configuration clear in the relevant guide.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
documentation, mobile
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.