Antdesign-mobile Accordion размещает тень Panel над своим контентом

Question

Я совершенно новый, чтобы реагировать на родной и antdesign-mobile. Я использовал аккордеон от antdesign и хочу дать ему тень от коробки, которая будет помещена поверх его детей. Так что мой Header в <Accordion.Panel> должен бросить тень на его содержание.

Но что бы я ни делал, тень находится под списком. Есть идеи?

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Accordion from 'antd-mobile/lib/accordion';

const onChange = (key) => {
  console.log(key);
}

const Header = () => (
 <View style={styles.header}>
  <View>
   <Text>Rating da</Text>
   <Text>Rating hier</Text>
  </View>
 </View>
)

const RatingContainer = (product) => (
 <View>
  <Accordion style={styles.test} onChange={this.onChange}>
      <Accordion.Panel style={styles.ratingHeader} header={<Header />}>
       <View style={styles.panels}>
     <Text>Sub 1</Text>
     <Text>Sub 2</Text>
    </View>
   </Accordion.Panel>
  </Accordion>
 </View>
)

export default RatingContainer;

const styles = StyleSheet.create({
 test: {
  backgroundColor: 'green',
 },
 ratingHeader: {
  position: 'relative',
  // elevation: 1,
  // flex: 1,
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor: 'white',
    shadowRadius: 5,
    shadowColor: 'black',
    shadowOpacity: 1,
    shadowOffset: {
     width: 5,
     height: 5,
    },
    zIndex: 100,
  },
  header: {
   position: 'relative',
   // backgroundColor: 'red',
  // width: '90%',
  flex: 1,
  flexDirection: 'row',
  },
  panels: {
   position: 'relative',
   marginLeft: 8,
   marginRight: 8,
   backgroundColor: 'white',
   zIndex: -1,
  },
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>