Tabs.Container in a screen without screen header causing unlikely shadow on top of the screen

[elirangoshen]

Current behavior

When im using Tab.Container in a screen that im using custom screen header, i notice there is some shadow line in the top

Expected behaviour

there shouldn't be any shadow in the top of the screen

Code sample

For Syntax Highlighting check this link

Screenshots (if applicable)

What have you tried

I tried to change Tab.Container props but still couldn't solve it

[andreialecu]

This is caused by these default styles:

https://github.com/PedroBern/react-native-collapsible-tab-view/blob/73af1692f88de0c525ebc6440ed592a5ff7e4fcf/src/Container.tsx#L548-L561

You can use the headerContainerStyle prop to override them.

[elirangoshen]

thanks ! it worked

[rahulrj25]

Setting shadowOpacity: 0 and elevation: 0 did the job for me

[acro5piano]

Full example:

const styles = StyleSheet.create({
  headerContainerStyle: {
    shadowOpacity: 0,
  },
});

  <Tabs.Container
    headerContainerStyle={styles.headerContainerStyle}
    // ...

Setting elevation is required to support Android though