Render Error: Cannot read property 'level3' of undefined in Searchbar

[prathameshkarambelkar]

Current behaviour

Error in searchbar component , RENDER ERROR: Cannot read propert 'level3' of undefined

Expected behaviour

should work fine without error

How to reproduce?

just imported searchbar, and gave necessary props as shown in documentation

Preview

What have you tried so far?

Not found any solutions on web so far, re-installed the library

Your Environment

software	version
react-native	0.71.7
react-native-paper	^5.9.1
node	18
yarn	x.x.x

[lukewalczak]

Hey @prathameshkarambelkar, I'm not able to reproduce your issue, what you can observe on the following snack. Could you please prepare your snack presenting the problem?

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[lukewalczak]

Closing due to inactivity.

[7ipolito]

Same problem here

[LucasTrombim]

Same here.

[lukewalczak]

Can you then provide the repro?

[Systemcheck]

I had the same error yesterday with the following theme extending:

const md3theme = useMaterial3Theme(); const paperTheme = theme === 'dark' ? { ...MD3DarkTheme, colors: { ...md3theme.dark, gradientStart: '#00092b', gradientEnd: '#000000', surface: '#999999', //... md3theme.dark is undefined so thatswhy level3 was not set. I fixed it with: md3theme.theme.dark

maybe this helps

[amorimcode]

same here

[achadee]

Also having this issue with Dialogs

[lukewalczak]

Please provide the repro in order to fix the issue. Create the expo snack or prepare sample github repo

[ninekaw9]

In const theme = { ...DefaultTheme, colors: { ...DefaultTheme.colors, }, };

make sure that they are imported from import { DefaultTheme, PaperProvider } from 'react-native-paper'; that fixed the problem for me

[ivanoikon]

Also having this issue with Dialogs

I solved adding a PaperProvider ouside Dialog component

[error-try-again]

The first time I encountered TypeError: Cannot read property 'level3' of undefined was on line 285 of node_modules/react-native-paper/src/components/Searchbar.tsx - specifically the line backgroundColor: theme.colors.elevation.level3 - as the elevation property was not being instantiated, and neither was 'level3'. I was able to work around this by using the v2 default elevation instead for a while - before I ran into a similar error when trying to use a group FAB.

isV3 && {
  backgroundColor: theme.colors.elevation.level3,
  borderRadius: roundness * (isBarMode ? 7 : 0),
},

to

isV3 && {
  backgroundColor: styles.elevation,
  borderRadius: roundness * (isBarMode ? 7 : 0),
},

The root of the issue (for me) ultimately seemed to be due to my custom theme missing the elevation levels definition.

export const lightTheme = {
  animation: {
    scale: 1
  },
  colors: {
    accent: '#f06292',
    addFab: '#4caf50',
    backdrop: '#fff4f4',
    background: '#ffffff',
    border: '#BDBDBD',
    card: '#ffffff',
    check: '#4caf50',
    checkbox: '#9E9E9E',
    deleteFab: '#f44336',
    disabled: '#9E9E9E',
    editFab: '#2196f3',
    errorText: '#eb6f68',
    fancyText: '#bf347c',
    hamburger: '#757575',
    icon: '#000000',
    notification: '#ffffff',
    placeholder: '#9E9E9E',
    primary: '#f8bbd0',
    searchBar: '#ffffff',
    surface: '#ffffff',
    text: '#2f2235',
    textInput: '#ffffff',
    textInputLabel: '#000000',
    textInputPlaceholder: '#9E9E9E',
    textOutlineColor: '#a2a2a2',
    textSecondary: '#000000',
    titleText: '#000000',
    uncheck: '#f44336'
  },
  roundness: 2,
  version: 3
};

Resolution:

export const lightTheme = {
  animation: {
    scale: 1
  },
  colors: {
    accent: '#f06292',
    addFab: '#4caf50',
    backdrop: '#fff4f4',
    background: '#ffffff',
    border: '#BDBDBD',
    card: '#ffffff',
    check: '#4caf50',
    checkbox: '#9E9E9E',
    deleteFab: '#f44336',
    disabled: '#9E9E9E',
    editFab: '#2196f3',
    elevation: {
      level0: '#ffffff',
      level1: '#f5f5f5',
      level2: '#eeeeee',
      level3: '#e0e0e0',
      level4: '#bdbdbd',
      level5: '#9e9e9e'
    },
    errorText: '#eb6f68',
    fancyText: '#bf347c',
    hamburger: '#757575',
    icon: '#000000',
    notification: '#ffffff',
    placeholder: '#9E9E9E',
    primary: '#f8bbd0',
    searchBar: '#ffffff',
    surface: '#ffffff',
    text: '#2f2235',
    textInput: '#ffffff',
    textInputLabel: '#000000',
    textInputPlaceholder: '#9E9E9E',
    textOutlineColor: '#a2a2a2',
    textSecondary: '#000000',
    titleText: '#000000',
    uncheck: '#f44336'
  },
  roundness: 2,
  version: 3
};

[pedroamuniz]

you're not setting the theme properly, try something like this

const theme: ThemeProp = { ...MD3LightTheme, colors: { ...MD3LightTheme.colors, primary: "blue", secondary: "red", }, };

......