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

user_10077950 0
Viewed 2683

Current Behavior

  • Top side of tabBar has shadow.

enter image description here

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, 
          },
        }}>
react-navigation-v5 react-navigation react-native css
1 Answers

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.

user_123687970
Related