native-navigation stack in tab navigator

Question

Having a tab navigator, when adding stack-navigator inside it like:

const Tabs = createBottomTabNavigator();
const HomeStack = createStackNavigator();
const SearchStack = createStackNavigator();

const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={HomeScreen} />
  </HomeStack.Navigator>
)

const SearchStackScreen = () => (
  <SearchStack.Navigator>
    <SearchStack.Screen name='Search' component={SearchScreen} />
  </SearchStack.Navigator>
)
...
<NavigationContainer>
  <Tabs.Navigator>
    <Tabs.Screen name='HomeTab' component={HomeStackScreen} />
    <Tabs.Screen name='SearchTab' component={SearchStackScreen} />
  </Tabs.Navigator>
</NavigationContainer>

my app looks like this

and what bothers me is in the red rectangle in which two names: HomeTab and Home are displayed that feels redundant. Is there a way to get rid of any of them?

Answer 1

found it. this solves my problem: <Tabs.Screen name='HomeTab' component={HomeStackScreen} options={{ headerShown: false }} />