React Native - Shadows over view StyleSheet

The Z-Index in React Native is based on render order . For example, let's say I have a title in a ListView item.

So let's say naked ListItem

:

<View>
  <View>Header</View>
  <View>BodyContent</View>
</View>

      

        
        
        
      

    

Basically, I just want the header to have a slight drop shadow above the body .

However, since the Z-index is displayed based on ordering, the title sits below the body content (as well as the shadow).

I tried to add a shadow with a slightly larger offset so that the shadow only appears at the bottom. It looks great until the image appears above it.

EDIT:

I would like the shadow to appear from the header, flowing a little over the body. Similar to the navigation bar and its contents.