callstack / callstack/react-native-paper

feat: modernize BottomNavigationBar

Open
#4,975 0 comments 0 reactions 0 assignees View on GitHub
v6
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

Modernize the existing BottomNavigationBar to reuse theme tokens (color, shape, motion, typography etc) and make sure the MD3 specs are respected. See the expressive update too: https://m3.material.io/components/navigation-bar/overview

# Current State

## Bottom Navigation

**MD3 spec:** Navigation bar
**Specs link:** https://m3.material.io/components/navigation-bar/specs

### Notes

- `BottomNavigation` is a router-aware wrapper around `BottomNavigation.Bar` that handles scene management and tab transitions. MD3 compliance is governed by `BottomNavigation.Bar` below.

---

## Bottom Navigation Bar

**MD3 spec:** Navigation bar
**Specs link:** https://m3.material.io/components/navigation-bar/specs

### Color tokens

- Container `surfaceContainer` ✅
- Active icon `onSecondaryContainer` ✅
- Active indicator `secondaryContainer` ✅
- Inactive icon `onSurfaceVariant` ✅
- Inactive label `onSurfaceVariant` ✅
- [ ] Active label uses `onSurface`. Spec token `Nav bar item active label text color` maps to `secondary`

### Spacing / sizing

- Active indicator 64x32dp with 16dp corner radius ✅
- Icon-to-label gap 4dp (`marginBottom: 4` on icon container) ✅
- [ ] `v3NoLabelContainer` height is hardcoded to 80dp. Spec requires 64dp
- [ ] `BAR_HEIGHT = 56` constant is used for label height styling. Spec bar height is 64dp

### Behavior

- [ ] `shifting` mode (inactive tabs hide labels) is an MD2 pattern not present in MD3
- `labeled={false}` hides all labels (not in MD3 spec, but a deliberate extension used by Google’s own products e.g. Gmail) ✅
- [ ] `rippleColor: 'transparent'` suppresses state layer feedback. MD3 requires visible state layers (8% hovered, 10% focused/pressed)
- [ ] Flexible navigation bar (horizontal items for medium windows) not implemented. M3 Expressive requires horizontal layout support
- [ ] Baseline navigation bar is not recommended in M3 Expressive; flexible variant should replace it

### Notes

- Rename to match MD3: **`NavigationBar`**

Contributor guide

Open the contributing guide

Research direction

Start with the existing BottomNavigation and BottomNavigation.Bar entry points, then compare their current behavior with the linked Material 3 navigation bar and expressive specifications. Review the listed color, sizing, and behavior gaps, including the NavigationBar rename; done means the checklist is addressed and the MD3 behavior is implemented consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
design, mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.