theme.fonts is undefined

[magicvirus]

I'm getting theme.fonts is undefined when using the DatePickerModal. Can one please help not sure why is complaining about theme.fonts.

I even setup fonts config in react paper and still not working.

[RichardLindhout]

Can you share the exact error, did you use the ThemeProvider of react-native-paper?

[sumitagarwal31]

I am even getting the same error , please open the issue

[RichardLindhout]

Are you using the beta version of react-native-paper?

[sumitagarwal31]

I am using "react-native-paper-dates": "0.8.7"

[RichardLindhout]

Dit you wrap the Provider of react-native-paper in your app.js / app.tsx?

[RichardLindhout]

See #usage https://callstack.github.io/react-native-paper/getting-started.html#usage

[sumitagarwal31]

I have attached the screenshot , please have a look

[sumitagarwal31]

@RichardLindhout Please check the screenshot where I am getting the issue. Thanks!

[kukuhpro]

using "react-native-paper-dates": "^0.9.0" got the same issue and same error message

waiting for update on this issue. Thanks

[sumitagarwal31]

@RichardLindhout can you please help with the issue

[BryanTacuri]

got the same issue and same error message

[fdelacruzsoto]

react native paper 5 does not have the font type for the themes by default.

This is the workaround I used:

I declared a global type for the theme and added the fonts there

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import {
  Font,
  MD3Colors,
  MD3Theme,
} from 'react-native-paper/lib/typescript/types';

declare global {
  namespace ReactNativePaper {
    interface Fonts {
      regular: Font;
      medium: Font;
      light: Font;
      thin: Font;
    }
    interface Colors extends MD3Colors {
      accent: string;
      danger: string;
      backgroundPrimary: string;
      background: string;
    }
    interface Theme extends MD3Theme {
      colors: Colors;
      fonts: Fonts;
    }
  }
}

Since I'm extending the theme I do something like this:

import {
  DarkTheme as NavigationDarkTheme,
  DefaultTheme as NavigationDefaultTheme,
} from '@react-navigation/native';

import {
  configureFonts,
  MD3Colors,
  MD3DarkTheme as PaperDarkTheme,
  MD3LightTheme as PaperDefaultTheme,
} from 'react-native-paper';

export const CombinedDefaultTheme = {
  ...PaperDefaultTheme,
  ...NavigationDefaultTheme,
  colors: {
    ...NavigationDefaultTheme.colors,
    ...PaperDefaultTheme.colors,
    primary: '#193C34',
    secondary: '#32AD38',
    tertiary: '#45FF00',
    accent: '#FFFF00',
    danger: '#dc2626',
    backgroundPrimary: '#5BBD60',
    background: '#FFF',
  },
  fonts: configureFonts(),
};

export const CombinedDarkTheme = {
  ...PaperDarkTheme,
  ...NavigationDarkTheme,
  colors: {
    ...NavigationDarkTheme.colors,
    ...PaperDarkTheme.colors,
    primary: '#193C34',
    secondary: '#32AD38',
    tertiary: '#45FF00',
    accent: '#FFFF00',
    danger: '#dc2626',
    backgroundPrimary: '#5BBD60',
    background: MD3Colors.neutralVariant30,
  },
  fonts: configureFonts(),
};

This is going to fix the issue

[iM-GeeKy]

Closed by https://github.com/web-ridge/react-native-paper-dates/pull/206