fix: undefined colors property for material bottom tab

[FN-FAL113]

Motivation

Fixes unsafe access to an undefined property during theme change while using material bottom tab
With this the developer still gets the freedom on theming their navigations while not using react-native-paper's provider context

resolves #11208

Test plan

1. Toggle dark theme
2. DefaultTheme, DarkTheme or any custom theme created by a developer is passed to NavigationContainer theme props
3. An error gets thrown once a developer uses a different theme while using material bottom tab navigation
   

[github-actions]

Hey @FN-FAL113! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

[netlify]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	aa22897
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/63e85622550576000800995e
😎 Deploy Preview	https://deploy-preview-11219--react-navigation-example.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[FN-FAL113]

This fixes issues when a developer is not using react native paper's Provider wrapper/context

[FN-FAL113]

Ok upon testing and debugging, DarkTheme being imported from react-native-paper would cause the said undefined issue.
This might be because DarkTheme got deprecated and changed to MD3DarkTheme or any other changes to react native paper's theme.
Changing DarkTheme to MD3DarkTheme inside the imports would also suffice as a fix for this issue but unsure of backwawrds compatibility or wrapping material bottom navigation component with paper's Provider context with a given theme prop

Let me know what route should this pr go.

[danieldanielecki]

It looks like this bug have been introduced in a83f6e0

[satya164]

Thanks for the PR. It'll be problematic to do use MD3DarkTheme as it may break compatibility with older versions of paper.

You should instead make sure that paper and react navigation's themes match: e.g. pass dark theme for react navigation if you're using dark theme for paper.

https://callstack.github.io/react-native-paper/theming-with-react-navigation.html

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[FN-FAL113]

Thanks for the PR. It'll be problematic to do use MD3DarkTheme as it may break compatibility with older versions of paper.

You should instead make sure that paper and react navigation's themes match: e.g. pass dark theme for react navigation if you're using dark theme for paper.

https://callstack.github.io/react-native-paper/theming-with-react-navigation.html

understood, but any reason why an optional chaining can't be implemented in-case a developer uses a different theme, this could prevent such exceptions being thrown that is not really informative for debugging.

[satya164]

this navigator will move to react-native-paper package to support the new version so I don't want to add workarounds for it here.

[danieldanielecki]

@FN-FAL113, were you able to find in which release they expect to fix it?

[FN-FAL113]

@FN-FAL113, were you able to find in which release they expect to fix it?

I resorted to using the paper context provider, I supplied a theme as a value

[FN-FAL113]

Although I have not checked the latest version on react native paper if its fixed

[danieldanielecki]

@FN-FAL113, were you able to find in which release they expect to fix it?

I resorted to using the paper context provider, I supplied a theme as a value

can you provide code snippet?

[danieldanielecki]

Although I have not checked the latest version on react native paper if its fixed

@satya164, might you let us know?

[danieldanielecki]

Thanks for the PR. It'll be problematic to do use MD3DarkTheme as it may break compatibility with older versions of paper.

You should instead make sure that paper and react navigation's themes match: e.g. pass dark theme for react navigation if you're using dark theme for paper.

https://callstack.github.io/react-native-paper/theming-with-react-navigation.html

page not found...

[FN-FAL113]

Thanks for the PR. It'll be problematic to do use MD3DarkTheme as it may break compatibility with older versions of paper.
You should instead make sure that paper and react navigation's themes match: e.g. pass dark theme for react navigation if you're using dark theme for paper.
https://callstack.github.io/react-native-paper/theming-with-react-navigation.html

page not found...

https://callstack.github.io/react-native-paper/docs/guides/theming
https://callstack.github.io/react-native-paper/docs/guides/theming-with-react-navigation

[danieldanielecki]

It's as simple as applying 2 lines of code:

import { MD3DarkTheme, Provider as PaperProvider } from "react-native-paper";
...
<PaperProvider theme={MD3DarkTheme}>
...

the docs confused me a lot.

[FN-FAL113]

It's as simple as applying 2 lines of code:

import { MD3DarkTheme, Provider as PaperProvider } from "react-native-paper";
...
<PaperProvider theme={MD3DarkTheme}>
...

the docs confused me a lot.

if you read the wrong part it will surely confused you, It did not took me that long to fix the issue once I got to read the docs

[danieldanielecki]

Not sure why they include the CombinedDarkTheme part if it works simply with MD3DarkTheme.

[FN-FAL113]

I guess its for combining navigation and paper theming? since paper serves their own components with compliant material designs and not just aimed for navigation theming