React Native Nested Navigation

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.