React Native Nested Navigation - react-native

Question

import React from 'react';
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import {MaterialCommunityIcons,Feather} from '#expo/vector-icons';
import {VideoTab} from './VideoTab';
import {EbookTab} from './EbookTab';
import {TestTab} from './TestTab';
import {NotesTab} from './NotesTab';
const Bottom = createMaterialBottomTabNavigator();
export const BottomNav = ({navigation,route})=>{
return (
<Bottom.Navigator
initialRouteName="VideoTab"
activeColor="#1ca6d1"
inactiveColor="red"
labeled='true'
barStyle={{ backgroundColor: '#ffffff' }}
>
<Bottom.Screen
name="VideoTab"
component={VideoTab}
options={{
title:'Video',
tabBarLabel: 'Class',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="lightbulb-on-outline" color={color} size={26} />
),
}}
/>
<Bottom.Screen
name="NotesTab"
component={NotesTab}
options={{
title:'Notes',
tabBarLabel: 'Notes',
tabBarIcon: ({ color }) => (
<Feather name="book" color={color} size={26} />
),
}}
/>
<Bottom.Screen
name="EbookTab"
component={EbookTab}
options={{
tabBarBadge:true,
title:'Ebook',
tabBarLabel: 'QuestionBank',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="account" color={color} size={26} />
),
}}
/>
<Bottom.Screen
name="TestTab"
component={TestTab}
options={{
title:'Test',
tabBarLabel: 'Test',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="account" color={color} size={26} />
),
}}
/>
</Bottom.Navigator>
);
}
And this bottom navigation is inside a stack navigator.
Every screen name is a tab screen and every tab screen contain 3 tab.
When I am clicking any tab, then I want to change header title according to tab.
How to create this type of navigation header title in react native?

Answer 1

If you want to have every tab name to be the top try this: https://reactnavigation.org/docs/screen-options-resolution/
Check out the getHeaderTitle function and the switch statement below that - it helped me achieve this behavoir.