Feature Requests

What do I want to achieve? I want to put the tabBar of material-top-tab on the title of the stack or native-stack navigator. At this time, the tabBar should only occupy the actual content width, not the entire screen width. By default, the tabBar will be located below the Header , which greatly wastes screen space and does not meet our design guidelines. What problems did I encounter? I tried to use the Header component in @react-navigation/elements and assign the tabBar in material-top-tab to the headerTitle , but it resulted in a very strange effect. Here are my codes and the current effect: ```tsx const MyTabBar: React.FC<MaterialTopTabBarProps> = React.memo( ({ state, ...props }) => { return ( <Header title={''} headerTitleAlign={'center'} headerTitle={() => ( <TabBar {...props} renderIndicator={(props1) => ( <TabBarIndicator {...props1} style={{ backgroundColor: 'transparent' }} /> )} navigationState={state} style={{ width: 200 }} /> )} /> ); }, ); ``` As you can see，the whole tabBar become a color block，the tab bar label also disappeared

Active tab bar may have different text color or size.

What effect do I want to achieve? The tab indicator is overlaid on the tab text, not at the bottom of the tab What is the problem now? The TabBarIndicator component is fixed at the bottom and is only 2 pixels high. The specific code is here: https://github.com/react-navigation/react-navigation/blob/bddcc44ab0e0ad5630f7ee0feb69496412a00217/packages/react-native-tab-view/src/TabBarIndicator.tsx#L182 What do I expect? The size of tabBarIndicator should follow each tabBarItem . Maybe borderBottom can be used to achieve the current effect? After switching to this method, I believe it will be easier to achieve the following effects:

I want to capture a tab bar click onPressIn. Currently, there is no way to properly override tabBarItem. If I override tabBarLabel there still is a pressableOpacity that's wrapping it, capturing the press event. There also seems to be no way to have a custom pressable or disable the default press events. To my knowledge my usecase is not supported.

Would like to be able to disable animations when open drawer, open instant without animation (when use DrawerOpen) thanks.

On tablet in portrait mode it should be awesome to have a tab bar at the bottom and a 1/3 pane left with a list container and at the right side of this pane a 2/3 pane with the detail view of the selection of the list item from the 1/3 part. On tablet in landscape mode, the tab bar should be better aligned at the left of the screen, and still having the 1/3 + 2/3 screen pane ratio. Actually, to be more clear it is a master(list) + detail layout.

As I researched having a scaling drawer with header on is never done. Every tutorial just hides the default header. To overcome this we could give access to Scene Container component. for example: <Drawer.Navigator screenOptions={{ sceneContainerComponent=(props) => { //scaling drawer logic here <Animated.View style={animatedStyle}>{props.children / which is actual screen component /}</Animated.View> } }}> </Drawer.Navigator> With some option like this we could easily manipulate scene for any desired animations and features. Of course this is easy to workaround but why not support it ?

It would be super helpful.

Latest Material Design includes large titles similar to iOS but headerLargeTitle option doesn't work on Android More info: https://m3.material.io/components/top-app-bar/guidelines

In react-navigation v6 you can specify a custom header for the native stack. I'm wondering if there is a way to understand whether the current screen is presented modally or not while rendering the header so we can customize the header for modals. I was checking the js stack navigation implementation and it seems ModalPresentationContext is being used for this purpose. Is there any plan to bring such a thing to the native stack as well? It would be nice if we could have something like isModal param along with other params (navigation, options, route...) in the custom header function.