Remove header's border bottom line from bottom tab Navigator. React Navigation v6

Question

I am using react navigation v6 and bottom tab navigator and in this version of react navigation bottom tab navigator by default provides a Header. I want to remove the header's bottom line but there is no headerStyle property or inside headerLeftContainerStyle property, I tried to remove line by elevation, shadow and borderBottomWidth but nothing Happened

import React from 'react';
import { Image, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../screens/Main/Home'
import Profile from '../screens/Main/Profile'
import Favourites from '../screens/Main/Favourites'
import Recents from '../screens/Main/Recents'
import { Ionicons, Feather } from '@expo/vector-icons';
import theme from '../constants/theme';
const Tab = createBottomTabNavigator();
 <Ionicons  name="ios-menu-sharp" size={32} color="green" /> 
function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: 'rgb(242,242,242)' },
        tabBarStyle: {
          backgroundColor: 'rgb(242,242,242)',
          paddingBottom: 25,
          elevation: 0,
          borderTopWidth: 0,
          shadowOffset: {
            width: 0, height: 0 // for iOS
          },
          height: 70,
        },
        tabBarShowLabel: false,
        headerTitle: '',
        headerStatusBarHeight: 59,
        headerLeftContainerStyle: {paddingLeft: 30, borderBottomWidth: 0, elevation: 0},
        headerRightContainerStyle: {paddingRight: 35, borderBottomWidth: 0},
        tabBarActiveTintColor: theme.primary,
        tabBarInactiveTintColor: theme.secondary,
        // headerTransparent: true,
        headerLeft: () => <Image source={require('../../assets/icons/menu.png')} style={{ height: 19 }} resizeMode={'contain'} />,
        headerRight: () => <Feather name={'shopping-cart'} size={28} color={theme.secondary}/>
      }}
    >
      <Tab.Screen name="Home" component={Home} options={{tabBarIcon: (props) =>  <Ionicons  name="home" size={props.size} color={props.color} /> }} />
      <Tab.Screen name="Favorite" component={Favourites} options={{tabBarIcon: (props) =>  <Ionicons  name="heart" size={props.size} color={props.color} /> }}/>
      <Tab.Screen name="Profile" component={Profile} options={{tabBarIcon: (props) =>  <Ionicons  name="person" size={props.size} color={props.color} /> }}/>
      <Tab.Screen name="Recents" component={Recents} options={{tabBarIcon: (props) =>  <Ionicons  name="ios-timer" size={props.size} color={props.color} /> }}/>
    </Tab.Navigator>
  );
}

export default MyTabs;

Answer 1

React Navigation v6 (Stack Navigator) has a property headerShadowVisible. Providing the headerShadowVisible as false will help remove the shadow in a Stack Navigator. However when a Tab Navigator is provided as the child, this doesn't seem to be working. This can still be fixed by providing headerStyle to remove the shadow.

<Tab.Navigator
  screenOptions={{
    headerStyle: { 
      backgroundColor: 'rgb(242,242,242)',
      // below four properties will remove the shadow
      borderBottomColor: "transparent",
      shadowColor: 'transparent',
      borderBottomWidth: 0,
      elevation: 0
    },

    ...... all the other stuff
  }} 
>

Here's the Snack

Answer 2

please user this to remove the shadows. use have to set the elevation to 0

 <Stack.Navigator  
      screenOptions={{
        headerTitleStyle: {
          fontSize:16, 
        },
        headerStyle:{
          elevation:0
        },
        headerTitleAlign:'center',
        gestureEnabled:false,
       
      }} 
      independent={true}
          >
  // your code 
</Stack.Navigator>