callstack / callstack/react-native-paper

Missing fonts in NavigationTheme type

Ouverte
#4,751 2 commentaires 4 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
```
import { DefaultTheme, NavigationContainer } from '@react-navigation/native'
import { adaptNavigationTheme } from 'react-native-paper'
...
const { LightTheme } = adaptNavigationTheme({ reactNavigationLight: DefaultTheme })
...

...
```

Typing error in VSC:
```
Property 'fonts' is missing in type 'NavigationTheme' but required in type 'Theme'.ts(2741)
types.d.ts(22, 5): 'fonts' is declared here.
types.d.ts(313, 5): The expected type comes from property 'theme' which is declared here on type 'IntrinsicAttributes & NavigationContainerProps & { direction?: LocaleDirection | undefined; linking?: LinkingOptions<...> | undefined; fallback?: ReactNode; documentTitle?: DocumentTitleOptions | undefined; } & { ...; }'
(property) theme?: ReactNavigation.Theme | undefined
```

### Explanation
There is a discrepancy between:
`@react-navigation\native\src\types.tsx`
```
interface NativeTheme {
dark: boolean;
colors: {
...
};
fonts: {
regular: FontStyle;
medium: FontStyle;
bold: FontStyle;
heavy: FontStyle;
};
}
```
And `react-native-paper\src\types.tsx`
```
export type NavigationTheme = {
dark: boolean;
colors: {
...
};
};
```

### What have you tried so far?
Not a definitive fix, but, as a confirmation, the error disappeared with this edit in `react-native-paper\lib\typescript\types.d.ts`
```
/*psam*/type FontStyle = {
fontFamily: string;
fontWeight:
| 'normal'
| 'bold'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900';
};
export type NavigationTheme = {
dark: boolean;
colors: {
primary: string;
background: string;
card: string;
text: string;
border: string;
notification: string;
};
/*psam*/ fonts: {
regular: FontStyle;
medium: FontStyle;
bold: FontStyle;
heavy: FontStyle;
};
};
```

### Your Environment

| software | version
| --------------------- | -------
| @react-navigation/native | 7.1.9
| react-native | 0.79.1
| react-native-paper | 5.14.0

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Comparez @react-navigation/native/src/types.tsx avec react-native-paper/src/types.tsx, en vous concentrant sur NativeTheme et NavigationTheme. Utilisez l’exemple indiqué de NavigationContainer pour vérifier les types, et confirmez que l’erreur missing-fonts a disparu une fois que les définitions sources et les types générés sont cohérents.

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

Évaluation

Stack technique
react-native, typescript
Domaine
mobile-dev
Type d'issue
Bug
Difficulté
2/5
Temps estimé
1-3 heures
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

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