navigation header view have a shadow ，how does it to remove shadow？ #790

roselind · 2017-03-23T05:09:58Z

StackNavigator （StackNavigator）
ios ：

android:

jkongie · 2017-03-23T05:24:59Z

You can change the header style in navigationOptions of the StackNavigator

Something like this ( I haven't tested it though )

const MainNavigator = StackNavigator(
  {
    Home: { screen: Home }
  },
  {
    navigationOptions: {
      header: {
        style: {
          shadowOpacity: 0,
          shadowOffset: {
            height: 0,
          },
          shadowRadius: 0,
        }
      }
    }
  }
);

roselind · 2017-03-23T05:29:47Z

It doesn't work on Android

code：
const standardNavigationOptions = { header: { visible:true, tintColor: 'white', style: { backgroundColor: ColorDefDictionary.standardBlue, shadowOpacity: 0, shadowOffset: { height: 0, width:0, }, shadowRadius: 0, borderBottomWidth:0, }, .....

jkongie · 2017-03-23T05:43:53Z

These are the default header styles

https://github.com/react-community/react-navigation/blob/master/src/views/Header.js#L330-L341

elevation is an Android only style property that may be affecting causing the issue

roselind · 2017-03-23T06:00:25Z

It's not like that .
It doesn't work I set shadow ' s style

roselind · 2017-03-23T06:24:33Z

I tried a variety of ways ，I can not remove the shadow on android.
Please help it

kamalk333 · 2017-03-23T07:35:11Z

@roselind put this in its style object
-> (for ios)
shadowColor : '#5bc4ff'
shadowOpacity: 0,
shadowOffset: {
height: 0,
},
shadowRadius: 0,
-> elevation: 0 (for android)

Ehesp · 2017-03-23T08:58:01Z

elevation: 0 on Android removes this.

roselind · 2017-03-27T05:46:24Z

thanks . I solve it .

At first it didn't work, and the second day ，the shadow be removed, it looked like it was a cache

code :
navigationOptions: {
header: {
style: {
shadowOpacity: 0,
shadowOffset: {
height: 0,
width:0
},
shadowRadius: 0,
}
}

zarcode · 2017-06-22T09:50:42Z

@roselind using it like this

export const AppNavigator = StackNavigator(
    {
      Login: { screen: LoginScreen },
      Main: { screen: MainScreen },
    },
    {
        cardStyle: {
            shadowColor: 'transparent',
        },
        navigationOptions: {
            header: {
                style: {
                    elevation: 0,       //remove shadow on Android
                    shadowOpacity: 0,   //remove shadow on iOS
                }
            }
        }
    }
);

gives me error

ExceptionsManager.js:63 Objects are not valid as a React child (found: object with keys {style}). If you meant to render a collection of children, use an array instead. in View (at CardStack.js:391)

Please help

roselind · 2017-06-23T10:03:34Z

@zarcode
your code is error

`
react.js
export const AppNavigator = StackNavigator(
{
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
},
{
cardStyle: {
shadowColor: 'transparent',
},
header: {
style: {
elevation: 0, //remove shadow on Android
shadowOpacity: 0, //remove shadow on iOS
}
}

);
`

hbarylskyi · 2017-08-02T14:07:38Z

Properties names have changed, so:

  navigationOptions = {
      headerStyle: {
        elevation: 0,
        shadowOpacity: 0
      }
  }

tapz · 2017-10-24T17:05:57Z

shadowOpacity and elevation do nothing in 1.0.0-beta.15.

dsternlicht · 2017-11-08T09:40:34Z

@tapz Upgrading react-navigation to ^1.0.0-beta.19 in package.json and re-installing, did the trick.

hungdev · 2018-01-27T07:47:14Z

add

navigationOptions: {
            header: {
                style: {
                    elevation: 0,       //remove shadow on Android
                    shadowOpacity: 0,   
                }
            }
        }

to StackNavigator
It look like below code:

import { StackNavigator } from 'react-navigation'
import TransferScreen from '../Containers/TransferScreen'
import RegisterSuccessScreen from '../Containers/RegisterSuccessScreen'
import RegisterScreen from '../Containers/RegisterScreen'
import LaunchScreen from '../Containers/LaunchScreen'

import styles from './Styles/NavigationStyles'

// Manifest of possible screens
const PrimaryNav = StackNavigator({
  TransferScreen: {
    screen: TransferScreen,
    navigationOptions: {
      headerStyle: {
        elevation: 0,       // remove shadow on Android
        shadowOpacity: 0,   
        backgroundColor: '#25AAE1'
      }
    }
  },
  RegisterSuccessScreen: { screen: RegisterSuccessScreen },
  RegisterScreen: { screen: RegisterScreen },
  LaunchScreen: { screen: LaunchScreen }
}, {
    // Default config for all screens
    // headerMode: 'none',
  initialRouteName: 'TransferScreen',
  navigationOptions: {
    headerStyle: styles.header
  }
})

export default PrimaryNav

billscheidel · 2018-01-27T13:05:09Z

I've got a TabNavigator and no matter how I try to specify the headerStyle nothing seems to take. Is there a different way to do with a TabNavigator?

const HomeScreenNavigator = TabNavigator(
  {
    [screens.TODO]: {
      screen: ToDoScreen,
      navigationOptions: {
        headerStyle: {
          shadowOpacity: 0,
          elevation: 0,
        },
      },
    },
    [screens.CONTACTS]: { screen: ContactsScreen },
    [screens.INBOX]: { screen: InboxScreen },
  },
}

With this the border is still visible on the To Do Screen.

arronhunt · 2018-02-09T19:45:07Z

Can confirm, 1.0.0-beta.27 I cannot get the shadow to go away.

I have tried both options:

export default StackNavigator({
    Main: { 
        screen: Main,
        navigationOptions: {
            headerStyle: {
                shadowOpacity: 0
            }        
        }
    },
});

and

class Main extends Component {
    static navigationOptions = ({ navigation }) => {
        const { params = {} } = navigation.state;
        return {
            title: 'Main',
            headerStyle: { 
                shadowOpacity: 0
            },
        }
    }
}

SteveGreenley · 2018-02-17T06:02:29Z

I've looked through the code. On iOS the headerStyle property you need to override is 'borderBottomWidth'. This works for me with react-navigation ^1.0.3 as of 17th Feb 18:

headerStyle:{
// iOS
borderBottomWidth:0,
// Android
elevation:0
}

dhirendrarathod2000 · 2018-02-22T17:25:34Z

We have header set to null for the page and then following worked
Seems like the card/screens have the shadow of their own

StackNavigator({
     Main: { 
      screen: Main,
     },
     Main2: { 
      screen: Main2,
     },
   } , 
   {
     initialRouteName:'Main',
     cardStyle: {
      shadowColor: 'transparent',
     },
  },
);

totti1 · 2018-05-08T13:17:11Z

can someone please tell how to fix this if it's possible

SamBenson · 2018-05-11T09:24:30Z

@totti1 This fixes it: #790 (comment)

totti1 · 2018-05-14T13:02:27Z

i did it but nothing changed

nsisodiya · 2018-08-21T10:33:46Z

Trying to hide border from last 1 hour but because we hopelessly dependant on this repo and Google.
I hate this thing because I always waste so much time on such small issues. It is much easier to write our own code.

mengruwu · 2018-08-21T15:52:40Z

@nsisodiya Have you tried to set borderBottomWidth: 0 in headerStyle ?

tomleader · 2018-08-30T03:01:56Z

headerStyle: {
        backgroundColor: '#fff',
        shadowColor: 'transparent',
        elevation: 0
      }

DON'T set the borderBottomWidth attr

localshred · 2018-09-26T03:07:45Z

Just to add clarity for others, I'm using a bottom tab navigator (from react-navigation-material-bottom-tabs) and two of my tabs have their own stack navigators. Setting the headerStyle didn't remove the shadow for me, but setting cardStyle did. Here's the source of the whole file just so it's totally clear. The only lines added were the two styles in cardStyle in the stack function.

import { createStackNavigator } from 'react-navigation'
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'
import TabBarIcon from 'app/components/tab-bar-icon'
import CommitmentsScreen from 'app/containers/commitments-screen'
import FoodPlanScreen from 'app/containers/food-plan-screen'
import SettingsScreen from 'app/containers/settings-screen'
import FoodCategoriesSettingsScreen from 'app/containers/food-categories/settings-screen'
import FoodCategoriesEditScreen from 'app/containers/food-categories/edit-screen'
import PortionEditScreen from 'app/containers/meal-plans/portion-edit-screen'
import { colors, paperTheme } from 'app/themes'

export const DEFAULT_SCREEN_NAME = 'FoodPlan'

const stack = (initialRouteName, screens) =>
  createStackNavigator(screens, {
    initialRouteName,
    cardStyle: {      // <----- Adding these cardStyles is what removed the shadow for the stacks
      elevation: 0,
      shadowOpacity: 0
    }
  })

const tab = (screen, title, iconName, backgroundColor) => ({
  screen,
  navigationOptions: {
    barStyle: { backgroundColor },
    headerStyle: { backgroundColor },
    headerTintColor: colors.snow,
    tabBarIcon: TabBarIcon(iconName),
    title
  },
  customOverrides: {
    styles: {
      screen: { backgroundColor }
    }
  }
})

const FoodPlanStack = stack('FoodPlan', {
  FoodPlan: FoodPlanScreen,
  PortionEdit: PortionEditScreen
})

const SettingsStack = stack('Settings', {
  FoodCategoriesEdit: FoodCategoriesEditScreen,
  FoodCategoriesSettings: FoodCategoriesSettingsScreen,
  Settings: SettingsScreen
})

const tabs = {
  Commitments: tab(
    CommitmentsScreen,
    'Commitments',
    'check',
    colors.frenchMauve
  ),
  FoodPlan: tab(FoodPlanStack, 'Food Plan', 'utensils', colors.mediumTurquoise),
  Settings: tab(SettingsStack, 'Settings', 'cog', colors.darkPastelBlue)
}

const navigationSettings = {
  initialRouteName: DEFAULT_SCREEN_NAME,
  order: ['FoodPlan', 'Commitments', 'Settings'],
  labeled: false,
  activeTintColor: colors.snow,
  inactiveTintColor: colors.deepSpaceSparkle,
  barStyle: { backgroundColor: paperTheme.colors.primary },
  headerStyle: { backgroundColor: paperTheme.colors.primary },
  headerTintColor: paperTheme.colors.primary
}

const AppNavigation = createMaterialBottomTabNavigator(tabs, navigationSettings)

export default AppNavigation

matthewfbenjamin · 2018-10-17T14:59:28Z

I am using react-navigation @ 2.14.2 and SteveGreenley's solution worked for me:

headerStyle:{
  // iOS
  borderBottomWidth:0,
  // Android
  elevation:0
}

MounirDhahri · 2018-11-15T11:32:54Z

For react-navigation 2.x this worked for me with both android and iOS:

navigationOptions: {
      ..... // Your other stuff goes here
      headerStyle: {
        shadowOpacity: 0,
        shadowOffset: {
          height: 0
        },
        shadowRadius: 0,
        borderBottomWidth: 0,
        elevation: 0
      }
    }

v-ken · 2018-11-19T12:16:32Z

Solution above works, however on iOS, when you press the back button, the bottom border shows briefly.

mikeyamato · 2018-12-19T06:19:08Z

Solution above works, however on iOS, when you press the back button, the bottom border shows briefly.

This is due to the previous screen not being unmounted. Therefore, what you're seeing is not from the header you removed the border from but rather the header on the previous screen.

evanlesmez · 2019-04-25T19:35:36Z

As of 3.x on 4/25/19 on Android used :

      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0,
      marginBottom: -1

marginBottom -1 helps when you have a top bar nav underneath the header

Cpinto0594 · 2019-08-16T14:51:37Z

@roselind put this in its style object
-> (for ios)
shadowColor : '#5bc4ff'
shadowOpacity: 0,
shadowOffset: {
height: 0,
},
shadowRadius: 0,
-> elevation: 0 (for android)

This was helpful. here my code:
headerStyle: {
backgroundColor: COLORS.appColor,
//shadowColor: '#5bc4ff',
shadowOpacity: 0,
shadowOffset: {
height: 0,
},
shadowRadius: 0,
elevation: 0
},

matthewfbenjamin · 2019-08-16T16:17:01Z

Here's what worked for me:

import { Platform, StyleSheet } from 'react-native'
import { BlurView } from '@react-native-community/blur'
import { createStackNavigator, createAppContainer, HeaderStyleInterpolator } from 'react-navigation'

createStackNavigator({
    RouteA: {
      screen: RouteA,
      params: { someVariable: true },
    },
    RouteB: {
      screen: RouteB,
    }
  },
  {
    defaultNavigationOptions: {
      headerBackground:
      Platform.OS === 'ios' ? (
        <BlurView style={{ flex: 1 }} blurType="light" />
      ) : (
        <AndroidSpecificHeader />
      ),
      headerStyle: {
        borderBottomColor: theme.colors.header.borderBottomColor,
        borderBottomWidth: StyleSheet.hairlineWidth,
      },
      headerTransparent: true,
    },
    headerTransitionPreset: 'uikit',
    transitionConfig: () => ({
      headerBackgroundInterpolator: HeaderStyleInterpolator.forBackgroundWithTranslation,
    }),
    headerMode: 'float',
    initialRouteName: 'RouteA',
  })

I then proceeded to put specific navigationObjects in the routes, like such:

RouteA.navigationOptions = ({ navigation }) => {
  const { params } = navigation.state
  let showHeaderLeft = false
  if (params && params.showHeaderLeft) {
    showHeaderLeft = params.showHeaderLeft
  }
  return {
    headerLeft: showHeaderLeft ? <NavigationHeaderLeft onPress={() => doSomeThing()} /> : null,
    title: 'RouteA',
  }
}

JiangXuefeng · 2019-09-09T04:05:59Z

this works well:
headerStyle: {
borderBottomWidth: 0, // for ios
elevation: 0// for android
}

Hissvard · 2019-11-15T16:57:03Z

I implemented a custom header on iOS and has this issue where the header had a white square, 2px wide, in the leftmost area of every header. It was particularly noticeable when swiping back from a screen.

What made it go away was:

createStackNavigator({}, { cardShadowEnabled: false });

Mlobaievskyi · 2019-11-21T10:59:07Z

you need to use

navigationOptions: { hideShadow: true }

SubinRabin · 2020-01-31T11:40:58Z

navTransparent={true}

Add this attribute in Scene tag.This will working properly

felipejh · 2020-10-01T12:58:09Z

elevation: 0 in Android 10 doesnt work.
It is changes to transparent header.

ihar-dambrouski · 2020-11-23T14:16:44Z

it works for react native 0.63.3 and react navigation 5

csbun · 2024-04-24T02:51:03Z

<Stack.Screen
  options={{ headerShadowVisible: false }}
  ...
/>

works on react-navigation@6 , doc link

github-actions · 2024-04-24T02:51:15Z

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

roselind closed this as completed Mar 27, 2017

This was referenced Oct 7, 2017

How can i remove the borderBottom of header? #2457

Closed

How to remove border bellow the header? #865

Closed

vishaldhanotiya mentioned this issue Dec 31, 2017

Can't to remove shadow on the header in Android #609

Closed

navigation header view have a shadow ，how does it to remove shadow？ #790

navigation header view have a shadow ，how does it to remove shadow？ #790

Comments

roselind commented Mar 23, 2017 • edited

jkongie commented Mar 23, 2017 • edited

roselind commented Mar 23, 2017 • edited

jkongie commented Mar 23, 2017

roselind commented Mar 23, 2017

roselind commented Mar 23, 2017 • edited

kamalk333 commented Mar 23, 2017 • edited

Ehesp commented Mar 23, 2017

roselind commented Mar 27, 2017

zarcode commented Jun 22, 2017 • edited

roselind commented Jun 23, 2017 • edited

hbarylskyi commented Aug 2, 2017

tapz commented Oct 24, 2017

dsternlicht commented Nov 8, 2017

hungdev commented Jan 27, 2018 • edited

billscheidel commented Jan 27, 2018

arronhunt commented Feb 9, 2018

SteveGreenley commented Feb 17, 2018

dhirendrarathod2000 commented Feb 22, 2018

totti1 commented May 8, 2018

SamBenson commented May 11, 2018

totti1 commented May 14, 2018

nsisodiya commented Aug 21, 2018

mengruwu commented Aug 21, 2018

tomleader commented Aug 30, 2018

localshred commented Sep 26, 2018 • edited

matthewfbenjamin commented Oct 17, 2018

MounirDhahri commented Nov 15, 2018 • edited

v-ken commented Nov 19, 2018

mikeyamato commented Dec 19, 2018 • edited

evanlesmez commented Apr 25, 2019 • edited

Cpinto0594 commented Aug 16, 2019 • edited

matthewfbenjamin commented Aug 16, 2019 • edited

JiangXuefeng commented Sep 9, 2019

Hissvard commented Nov 15, 2019

Mlobaievskyi commented Nov 21, 2019

SubinRabin commented Jan 31, 2020 • edited

felipejh commented Oct 1, 2020

ihar-dambrouski commented Nov 23, 2020

csbun commented Apr 24, 2024 • edited

github-actions bot commented Apr 24, 2024

roselind commented Mar 23, 2017 •

edited

jkongie commented Mar 23, 2017 •

edited

roselind commented Mar 23, 2017 •

edited

roselind commented Mar 23, 2017 •

edited

kamalk333 commented Mar 23, 2017 •

edited

zarcode commented Jun 22, 2017 •

edited

roselind commented Jun 23, 2017 •

edited

hungdev commented Jan 27, 2018 •

edited

localshred commented Sep 26, 2018 •

edited

MounirDhahri commented Nov 15, 2018 •

edited

mikeyamato commented Dec 19, 2018 •

edited

evanlesmez commented Apr 25, 2019 •

edited

Cpinto0594 commented Aug 16, 2019 •

edited

matthewfbenjamin commented Aug 16, 2019 •

edited

SubinRabin commented Jan 31, 2020 •

edited

csbun commented Apr 24, 2024 •

edited