[5.0.0-rc.2] TypeError: undefined is not an object (evaluating 't.colors') with material-bottom-tabs

[root-io]

Current behaviour

TypeError: undefined is not an object (evaluating 't.colors')

This error is located at:
    in MaterialBottomTabViewInner (created by MaterialBottomTabView)
    in RCTView (at View.js:32)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by MaterialBottomTabView)
    in MaterialBottomTabView (created by MaterialBottomTabNavigator)
    in Unknown (created by MaterialBottomTabNavigator)
    in MaterialBottomTabNavigator (at Home.tsx:15)
    in RCTView (at View.js:32)
    in View (at Home.tsx:13)
    in Home (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (at View.js:32)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RNSScreen (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (at App.tsx:40)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (at App.tsx:39)
    in App (at my-app/index.js:26)
    in ThemeProvider (created by Provider)
    in RCTView (at View.js:32)
    in View (created by Portal.Host)
    in Portal.Host (created by Provider)
    in Provider (at my-app/index.js:25)
    in ApolloProvider (at my-app/index.js:24)
    in ErrorBoundary (at my-app/index.js:23)
    in MyApp (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in MyApp(RootComponent) (at renderApplication.js:60)

Expected behaviour

No error, it was working with react-native-paper v4.12.1

Code sample

import {MD2LightTheme as DefaultTheme, Provider as PaperProvider} from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'blue',
  },
};

<Tab.Screen
  name="Foo"
  component={Foo}
  options={{
    tabBarLabel: 'Foo',
    tabBarIcon: ({color}) => (
      <MaterialCommunityIcons name="home" color={color} size={26} />
    ),
  }}
/>

Your Environment

software	version
ios or android	android 12
react-native	0.68.2
react-native-paper	5.0.0-rc.2
node	16.15.1
npm or yarn	npm 8.11.0
expo sdk	no

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.68.2, latest: 0.69.0)
• react-native-paper (found: 5.0.0-rc.2, latest: 4.12.1)
• npm (found: 8.11.0, latest: 8.13.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-paper (found: 5.0.0-rc.2, latest: 4.12.1)
• react-native (found: 0.68.2, latest: 0.69.0)
• npm (found: 8.11.0, latest: 8.13.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[lukewalczak]

Hey @root-io, thanks for reporting the issue. Could you please create a simple snack presenting the bug or create minimal repo?

[root-io]

Here we go https://snack.expo.dev/Or6P1NqOC

[lukewalczak]

Ok, I've found the problem - we have to update the material-bottom-tabs since it's using old paper version and using themes DefaultTheme and DarkTheme which don't exist in paper anymore.

[wimil]

Ok, I've found the problem - we have to update the material-bottom-tabs since it's using old paper version and using themes DefaultTheme and DarkTheme which don't exist in paper anymore.

how did you manage to solve it?

[jwueller]

Maybe I'm not fully understanding what's going on here, but I am very confused why it is even dealing with themes at all here:

https://github.com/react-navigation/react-navigation/blob/d19987b0574975df434aa54e0f1c1fba62e7aaa3/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx#L99

Shouldn't the <BottomNavigation/> component already inherit and handle theming correctly on its own, since passing it in explicitly is optional anyway? Would it be reasonable to just get rid of it here?

I'm not entirely sure why navigation needs to deal with theming in the first place. Can't it just treat those props as opaque?

[RGdevz]

+1

[Gnadhi]

Any updates on this ?

[juliushuck]

I fixed it in this package: https://www.npmjs.com/package/@juliushuck/react-native-navigation-material-bottom-tabs

I will be using it until this issue is resolved.

This is the change that was required: https://github.com/react-navigation/react-navigation/commit/78f2ee6fdb721b47a63007d5853db2c35164d219

[DominickVale]

This has been fixed on both the react-native-paper side in version 5.0.0-rc.4 and on the react-navigation side after this commit I tried this in my application and it's working correctly so far. (The example app on react-navigation still isn't using v5, though)

[error-try-again]

This is still an issue in version 5.0.2.

[YunusAndreasson]

This is still an issue in version 5.0.3.