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

root-io commented 1 year ago

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] commented 1 year ago

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] commented 1 year ago

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] commented 1 year ago

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 commented 1 year ago

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

root-io commented 1 year ago

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

lukewalczak commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

+1

Gnadhi commented 1 year ago

Any updates on this ?

juliushuck commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

This is still an issue in version 5.0.2.

YunusAndreasson commented 1 year ago

This is still an issue in version 5.0.3.

eisodev commented 1 week ago

Still an issue in "react-native-paper": "^5.12.3" and "@react-navigation/material-bottom-tabs": "^6.2.28".

Anyone knows a fix? Or do we still have to patch package material-bottom-tabs one year later as @juliushuck did above?

As mentioned here https://github.com/react-navigation/react-navigation/pull/11219#issuecomment-1464870188 you could import the MD3 theme, which I did:

import {
    MD2Colors as Colors,
    MD3DarkTheme as PaperDarkTheme,
    MD3LightTheme as PaperDefaultTheme,
    Provider as PaperProvider,
} from 'react-native-paper';

But react-navigation still havn't released an update to this change and is therefore breaking?

callstack / react-native-paper