callstack / callstack/react-native-paper

BottomNavigation.Bar applies wrong fontWeight to active label

Ouverte
#4,780 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez dans src/components/BottomNavigation/BottomNavigationBar.tsx par l’implémentation référencée dans l’issue et comparez le style des labels actifs et inactifs avec la spécification MD3 de la barre de navigation. Vérifiez le composant en utilisant BottomNavigation.Bar sur iOS et Android ; le travail est terminé lorsque le label actif utilise fontWeight 700 tandis que les labels inactifs conservent leur poids prévu.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
design, frontend
Type d'issue
Bug
Difficulté
2/5
Temps estimé
1-3 heures
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.