callstack / callstack/react-native-paper
BottomNavigation.Bar applies wrong fontWeight to active label
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
The `BottomNavigation.Bar` applies the same `fontWeight` to all labels (active and inactive) as seen [in the implementation](https://github.com/callstack/react-native-paper/blob/ff0df5454eb13d6e8e2d8f1c87c0bca8bb3635f0/src/components/BottomNavigation/BottomNavigationBar.tsx#L850) but according to the [MD3 spec](https://m3.material.io/components/navigation-bar/specs) the weight for the active label should be bold (i.e. 700).
### Expected behaviour
Active label should be bold.
### How to reproduce?
Use `BottomNavigation.Bar` (e.g. together with react-navigation).
### Preview
### What have you tried so far?
Read the implementation, which clearly is wrong.
### Your Environment
| software | version
| --------------------- | -------
| ios | x
| android | x
| react-native | x.x.x
| react-native-paper | 5.14.5
| node | x.x.x
| npm or yarn | x.x.x
| expo sdk | x.x.x
Contributor guide
Research direction
Start in src/components/BottomNavigation/BottomNavigationBar.tsx at the implementation linked in the issue and compare the active and inactive label styling with the MD3 navigation-bar specification. Verify the component when using BottomNavigation.Bar on iOS and Android; done means the active label uses fontWeight 700 while inactive labels retain their intended weight.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100