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

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

[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)

[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.