Add component for Tabs as per Material design 3 standards

[shirodkarpushkar]

A lot of existing packages are present for top material tabs but none of them follow updated material design 3 standards.

Since react native paper has almost all components as per material design 3, the tabs would be a missing piece and it would complete all the material 3 components.

I would request the development team to please add material top tabs as per material standards present in https://m3.material.io/components/tabs/overview.

Best Regards,
Pushkar

[lukewalczak]

Hey @shirodkarpushkar, there is a dedicated library for top tabs called react-native-tab-view and as far as I remember they were planning to adjust it to the Material You.

[iM-GeeKy]

@shirodkarpushkar I've sort of been tracking this internally and as it stands these were the most relevant links I could find for material you tabs.

satya164/react-native-tab-view#1399
https://react-navigation.canny.io/feature-requests/p/implement-material-design-3

It doesn't seem like it's actively being worked on and might be a while before it gets implemented. You can potentially create an issue on their repo, but they might direct you to the feature request link above.

[lukewalczak]

Currently, I'm closing the issue, however, if it will turn out that we are going to somehow cooperate with library authors and we will move tabs into Paper, you will be definitely notified.

[RichardLindhout]

PR is welcome with Material You at https://github.com/web-ridge/react-native-paper-tabs!

[okwasniewski]

Hey @shirodkarpushkar, @lukewalczak

Tab view has been moved to react navigation repository. Im definitely planning to add Material You design. It's hard to say exactly when but it is on the roadmap (Probably first half of this year).

https://github.com/react-navigation/react-navigation/tree/main/packages/react-native-tab-view

[tibbe]

@okwasniewski any updates on this?

[tibbe]

I think we should reopen this issue. There's still no MD3 implementation:

• react-navigation doesn't seem to be moving in this direction and
• react-native-paper-tabs doesn't work with react-navigation, as it doesn't use the Screen concept for its tabs.

I think if react-native-paper had a component, similar to how Appbar works, that could be passed as the tabBar component of the react-navigation material top tabs navigator that would be the best solution. It's hard for react-navigation to implement MD3 as it can't really rely on all the react-native-paper components that would be helpful for doing so.

[fabriziocucci]

@okwasniewski / @lukewalczak

Would it make sense to re-open this? Or what's the latest on this?