React-native-tab-view: Shadow iOS

[GCour]

Works great! Removed the other scroll tab component and replaced it with this one..

The only thing that bothers me a bit is that there's no shadow on iOS, only Android. Any way to fix this?

[satya164]

@GCour Thank you. You can pass a style prop to the tab bar with box shadow

[satya164]

BTW I've more improvements coming - https://github.com/react-native-community/react-native-tab-view/pull/36 :D

[GCour]

@satya164 I have added following style but the shadow is not showing:

shadowColor: '#000',
    shadowOpacity: 0.3,
    shadowRadius: 2,
    shadowOffset: {
      height: 2
    }

[satya164]

@GCour thanks. I'll have a look at it in an hour.

[satya164]

@GCour Hey, just tried this. Shadow works fine when you set a zIndex to move the tab up :)

    shadowColor: '#000',
    shadowOpacity: 0.3,
    shadowRadius: 2,
    shadowOffset: {
      height: 2,
    },
    zIndex: 1,

[satya164]

In next release there'll be a hairline shadow (like the navbar) below the tab bar by default. https://github.com/react-native-community/react-native-tab-view/commit/6c767ced7636302303922ee7332d0b5d841fe136

[satya164]

It's up - https://github.com/react-native-community/react-native-tab-view/releases/tag/v0.0.32

[WillyRamirez]

@satya164 how do I remove this default hairline shadow? Passing a style object with shadowOpacity: 0, to the tabBar does not seem to work..

[satya164]

@WillyRamirez passing style should work on iOS. do you have code/repro?

[WillyRamirez]

@satya164 I use android? Does that matter?

 _renderHeader = (props) => {
    props = {...props, social: this.props.profile.social };
    return <TabBar style={{shadowOpacity: 0}}
                   indicatorStyle={{borderWidth: 0, height: 0}}
                   renderIndicator={this._renderIndicator}
                   renderLabel={this._renderLabel(props, this.props.profile.social)} {...props} />;
  };

[satya164]

@WillyRamirez this is only for iOS. On Android you need to pass elevation: 0

[tomasfrancisco]

I'm getting this behavior even with an high zIndex value

I exaggerated on the shadow height and opacity so you can see better what I'm referring to.

Any thoughts?

[albinhubsch]

Having the same issue as @tomasfrancisco
The only way I managed to get around it was to set content background to transparent, which works in some cases but when you have a list view with items with background different from main bg this gets problematic.