question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to remove shadow of `Tabs` on Android?

See original GitHub issue

react-native, react and native-base version

React Native: 0.48.4.

React: 16.0.0-alpha.12.

Native Base: 2.3.2.

Expected behaviour

Remove shadow under tab bar.

Actual behaviour

Don’t know how to.

Steps to reproduce (code snippet or screenshot)

Remove code about shadows in ejected theme file (native-base-theme/components/TabContainer.js):

const tabContainerTheme = {
    elevation: 3,
    height: styles.transformSize(104),
    flexDirection: "row",
    // shadowColor: platformStyle === "material" ? "#000" : undefined,
    // shadowOffset: platformStyle === "material"
    //  ? { width: 0, height: 2 }
    //  : undefined,
    // shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
    // shadowRadius: platformStyle === "material" ? 1.2 : undefined,
    justifyContent: "space-around",
    borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0,
    borderColor: variables.topTabBarBorderColor
};

Or pass tabStyle to Tabs to override shadowColor, shadowOpacity or something.

Is the bug present in both ios and android or in any one of them?

Android.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:13 (2 by maintainers)

github_iconTop GitHub Comments

73reactions
MarcAlxcommented, Mar 1, 2018

Another way to do what akhil-geekyants suggests :

<Tabs 
tabContainerStyle={{
  elevation:0
}}
>
17reactions
akhil-gacommented, Oct 25, 2017

@boringer to remove shadow set elevation:0 in TabContainer.js

Read more comments on GitHub >

github_iconTop Results From Across the Web

Remove the shadow below TabLayout on android
I'm trying to remove the shadow below tabs while using TabLayout, which is defined in a normal layout (and not as a part...
Read more >
How To Remove Shadows- Samsung Gallery App Update!
iOS 16.2 - Is It Ready? · Android 13 on the Samsung Galaxy S22 Ultra! #shorts #android13 #galaxys22ultra · Samsung Galaxy Tab S8...
Read more >
How to remove shadow below action bar in Android?
This example demonstrates How to remove shadow below the action bar. Step 1 - Create a new project in Android Studio, go to...
Read more >
How to Remove the Drop Shadow From Desktop Icons in ...
Under the Visual Effects tab, uncheck the last item: Use drop shadows for icon labels on the desktop. Visual effects drop shadow. You...
Read more >
Create Shadows and Clip Views - Android Developers
Material design introduces elevation for UI elements. Elevation helps users understand the relative importance of each element and focus ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found