Native Base - The Header component shadow doesn't work

user_9526649 0
Viewed 3141

I'm using native-base to create a React Native app:

I'm using the Header Component to display Body, Left and Right elements. According to the docs, the shadow doesn't appear.

ScreenShot of the result :

enter image description here

Am I missing something simple here? Any help would be appreciated!

<Header style={{backgroundColor: 'white', shadowColor: 'black', shadowOpacity: 1, elevation: 4}} iosBarStyle="dark-content" androidStatusBarColor="lightgray">
 <Left>
   <Button transparent onPress={() => this.props.navigation.goBack(null)}>
      <Icon name='arrow-back' />
   </Button>
 </Left>
 <Body style={{ flex: 3 }}>
    <Title>TITLE </Title>
    <Subtitle>SUBTITLE</Subtitle>
 </Body>
 <Right></Right>
</Header>
native-base react-native
1 Answers

Looking at your StatusBar i assume you're testing it in on Android.

The Shadow Props

  • shadowColor
  • shadowOffset
  • shadowOpacity
  • shadowRadius

are only for ios specific platform.

Therefore you need to use elevation to render it on android.

user_66068310
Related