Variant labelLarge was not provided properly. Valid variants are regular, medium, bold, heavy.

[wogno]

Current behaviour

Expected behaviour

How to reproduce?

Preview

<!-
plicable. -->

What have you tried so far?

Your Environment

software	version
ios	18
android	x
react-native	0.76.3
react-native-paper	5.12.5
node	22
yarn	3.6
expo sdk	52

[elibroftw]

Had to roll back react-native-pager-view to 6.5.1 to fix this error.

[jelgersma]

My quick guess is that you're using a the PaperProvider with the theme attribute. I once made the mistake of importing the wrong DefaultTheme. I was overriding some defaults such as primary colors etc and used the spread operator for DefaultTheme. Imported the DefaultTheme from react-native instead of react-native-paper. Imported the proper DefaultTheme and all was good.

Example:
import {DefaultTheme, PaperProvider} from 'react-native-paper';

<PaperProvider theme={{ ...DefaultTheme, colors: { ...DefaultTheme.colors, primary: 'tomato' }}}>...</PaperProvider>

Hope this is the same issue you're facing and this fixes your issue :)

[elibroftw]

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

This is my current import.

[hxzrx]

import {
DarkTheme as NavigationDarkTheme,
DefaultTheme as NavigationDefaultTheme,
} from '@react-navigation/native';
This is my current import.

Same import and same bug, I rolled back react-navigation to 6 and fixed the bug.

[asorenson20]

I also have this bug and got around it by adding the react-native-paper text variants (e.g., labelMedium, labelLarge) explicitly to a 'fonts' property in my theme object. I think this becomes important when using v7 react-navigation because of the discussion in the upgrade docs. So, for example, a work around could be to have your theme as:

const CombinedTheme = {
  ...MD3LightTheme,
  ...LightTheme,
  colors: {
    ...MD3LightTheme.colors,
    ...LightTheme.colors,

    primary: "rgb(10, 92, 54)",
    onPrimary: "rgb(255, 255, 255)",
    primaryContainer: "rgb(10, 92, 54)",
    onPrimaryContainer: "rgb(0, 33, 16)",
    secondary: "rgb(100, 159, 166)",
    onSecondary: "rgb(255, 255, 255)",
    secondaryContainer: "rgb(100, 159, 166)",
    onSecondaryContainer: "rgb(0, 32, 35)",
  },
  fonts: {
    ...NavigationDefaultTheme.fonts,
    // Define all expected variants, falling back to 'regular' or another existing variant
    displayLarge: NavigationDefaultTheme.fonts.regular,
    displayMedium: NavigationDefaultTheme.fonts.regular,
    displaySmall: NavigationDefaultTheme.fonts.regular,
    headlineLarge: NavigationDefaultTheme.fonts.regular,
    headlineMedium: NavigationDefaultTheme.fonts.regular,
    headlineSmall: NavigationDefaultTheme.fonts.regular,
    titleLarge: NavigationDefaultTheme.fonts.regular,
    titleMedium: NavigationDefaultTheme.fonts.medium, // Example using medium for title variants
    titleSmall: NavigationDefaultTheme.fonts.medium,
    labelLarge: NavigationDefaultTheme.fonts.medium,
    labelMedium: NavigationDefaultTheme.fonts.medium,
    labelSmall: NavigationDefaultTheme.fonts.medium,
    bodyLarge: NavigationDefaultTheme.fonts.regular,
    bodyMedium: NavigationDefaultTheme.fonts.regular,
    bodySmall: NavigationDefaultTheme.fonts.regular,
  },
};

[asorenson20]

I ended up just making another file with all the react-native-paper defaults.

export const extraFonts = {
  displaySmall: {
    fontFamily: "Font",
    fontSize: 36,
    fontWeight: "400",
    letterSpacing: 0,
    lineHeight: 44,
  },
  displayMedium: {
    fontFamily: "Font",
    fontSize: 45,
    fontWeight: "400",
    letterSpacing: 0,
    lineHeight: 52,
  },
  displayLarge: {
    fontFamily: "Font",
    fontSize: 57,
    fontWeight: "400",
    letterSpacing: 0,
    lineHeight: 64,
  },
  headlineSmall: {
    fontFamily: "Font",
    fontSize: 24,
    fontWeight: "400",
    letterSpacing: 0,
    lineHeight: 32,
  },
  headlineMedium: {
    fontFamily: "Font",
    fontSize: 28,
    fontWeight: "400",
    letterSpacing: 0,
    lineHeight: 36,
  },
  headlineLarge: {
    fontFamily: "Font",
    fontSize: 32,
    fontWeight: "400",
    letterSpacing: 0,
    lineHeight: 40,
  },
  titleSmall: {
    fontFamily: "Font",
    fontSize: 14,
    fontWeight: "500",
    letterSpacing: 0.1,
    lineHeight: 20,
  },
  titleMedium: {
    fontFamily: "Font",
    fontSize: 16,
    fontWeight: "500",
    letterSpacing: 0.15,
    lineHeight: 24,
  },
  titleLarge: {
    fontFamily: "Font",
    fontSize: 22,
    fontWeight: "400",
    letterSpacing: 0,
    lineHeight: 28,
  },
  labelSmall: {
    fontFamily: "Font",
    fontSize: 11,
    fontWeight: "500",
    letterSpacing: 0.5,
    lineHeight: 16,
  },
  labelMedium: {
    fontFamily: "Font",
    fontSize: 12,
    fontWeight: "500",
    letterSpacing: 0.5,
    lineHeight: 16,
  },
  labelLarge: {
    fontFamily: "Font",
    fontSize: 14,
    fontWeight: "500",
    letterSpacing: 0.1,
    lineHeight: 20,
  },
  bodySmall: {
    fontFamily: "Font",
    fontSize: 12,
    fontWeight: "400",
    letterSpacing: 0.4,
    lineHeight: 16,
  },
  bodyMedium: {
    fontFamily: "Font",
    fontSize: 14,
    fontWeight: "400",
    letterSpacing: 0.25,
    lineHeight: 20,
  },
  bodyLarge: {
    fontFamily: "Font",
    fontSize: 16,
    fontWeight: "400",
    letterSpacing: 0.15,
    lineHeight: 24,
  },
};

Then I spread those into the 'fonts' property of the theme like so:

import { extraFonts } from "./data/text-variant-info";

fonts: {
    ...NavigationDefaultTheme.fonts,
    ...extraFonts,
  },

[djaffer]

Remove the fonts attribute from the paper provider. PaperProvider does not accept font attribute.

    delete theme.fonts;//this is the line the theme goes in paper provider.