callstack / callstack/react-native-paper

Missing fonts in NavigationTheme type

Open
#4,751 2 comments 4 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
```
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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.