how to removing Top shadow of material-top-tabs?

Question

Current Behavior

• Top side of tabBar has shadow.

Expected Behavior

• how to remove top shadow of top tabBar?
• tried elevation: 0 but it also removes bottom shadow.
• Side note - How top shadow was achieved for Tabs.Navigator (react navigation)? as box-shadow properties does not work for android and elevation only shows shadow to bottom.

How to reproduce

<>
<Header /> //App name custom component
<Tabs.Navigator
        ...
        tabBarOptions={{
          ....
          style: {
            // elevation: 0, 
          },
        }}>

Answer 1

Try with this:

<>
<Header /> //App name custom component
<Tabs.Navigator
        ...
        tabBarOptions={{
          ....
          style: {
            elevation: 0,
            shadowColor: "#000000",
            shadowOffset: { width: 0, height: 10 }, // change this for more shadow
            shadowOpacity: 0.4,
            shadowRadius: 6
          },
        }}>

shadowOffset: { width: 0, height: 10 } shadows place only in bottom of View. shadowOffset: { width: 0, height: -10 } shadows place only in top of View. shadowOffset: { width: 10, height: 0 } shadows place only in right of View. shadowOffset: { width: -10, height: 10 } shadows place only in left of View.

Found this example here.