title: Apply shadow to a container in react-native
body: <p>I have a table component that has different styling for the first, last rows and odd vs even elements:</p>
  
  <pre><code>import React from 'react';
  import { View, Text } from 'react-native';
  
  
  export const Table = ({ children }) =&gt; {
    // different style for odd and even elements, first and last rows
    let nextChildren = React.Children.toArray(children).filter(child =&gt; !!child);
  
    nextChildren = nextChildren.map(
      (el, i) =&gt; (i % 2 === 1 ? el : React.cloneElement(el, { odd: true }))
    );
  
    nextChildren[0] = React.cloneElement(nextChildren[0], { firstRow: true })
  
    nextChildren[nextChildren.length - 1] = React.cloneElement(
      nextChildren[nextChildren.length - 1],
      { lastRow: true }
    );
  
    return &lt;View style={styles.table}&gt;{nextChildren}&lt;/View&gt;;
  }
  </code></pre>
  
  <p>It contains several Rows:</p>
  
  <pre><code>export const Row = ({ children, type, firstRow, lastRow, odd, rowStyle, title, subtitle }) =&gt; (
    &lt;View
      style={[
        styles.row,
        styles[type],
        rowStyle,
        odd ? styles.odd : {},
        firstRow ? styles.firstRow : {},
        lastRow ? styles.lastRow : {},
      ]}
    &gt;
      {title &amp;&amp; &lt;Text style={styles.rowTitle}&gt;{title}&lt;/Text&gt;}
      {subtitle &amp;&amp; &lt;Text style={styles.rowSubtitle}&gt;{subtitle}&lt;/Text&gt;}
      {children}
    &lt;/View&gt;
  );
  </code></pre>
  
  <p>It's used like this:</p>
  
  <pre><code>&lt;Table&gt;
    &lt;Row type='column' title='Status' subtitle='status' /&gt;
    &lt;Row type='column' title='Transaction Start' subtitle='start' /&gt;
    &lt;Row type='column' title='Transaction Done' subtitle='end' /&gt;
    &lt;Row type='column' title='From' subtitle='from' /&gt;
    &lt;Row type='column' title='To' subtitle='to' /&gt;
    &lt;Row type='column' title='Transaction Number' subtitle='aewfibvkadier' /&gt;
  &lt;/Table&gt;
  </code></pre>
  
  <p>The important style is the first one, <code>table</code>: it's applied to the table container and has both a border (testing reasons) and the shadows applied to it.</p>
  
  <pre><code>import { StyleSheet } from 'react-native';
  const GREY10 = '#F8F9FB'
  const GREY50 = '#515A64'
  const BLACK = '#000000'
  
  const styles = StyleSheet.create({
    table: {
      margin: 12,
  
      // shadow
      shadowColor: BLACK,
      shadowOpacity: 1,
      shadowRadius: 10,
      shadowOffset: {
        height: 2,
        width: 2,
      },
  
      // border
      borderColor: BLACK,
      borderWidth: 1,
      borderRadius: 2,
    },
    row: {
      flexDirection: 'row',
      paddingHorizontal: 12,
      paddingVertical: 18,
      borderStyle: 'solid',
    },
  
    // row styles
    firstRow: {
      borderTopRightRadius: 6,
      borderTopLeftRadius: 6,
    },
    lastRow: {
      borderBottomRightRadius: 6,
      borderBottomLeftRadius: 6,
    },
    odd: {
      backgroundColor: GREY10,
    },
  
    // row types
    default: {
    },
    column: {
      flexDirection: 'column',
    },
  
    // styling for things in rows
    rowTitle: {
      color: GREY50,
      marginBottom: 4,
      fontSize: 16,
      lineHeight: 20,
    },
    rowSubtitle: {
      color: BLACK,
      fontSize: 16,
      lineHeight: 20,
    },
  
  })
  </code></pre>
  
  <p>You'd expect the shadows to applied to the table container, right? WRONG. </p>
  
  <p><a href="https://i.stack.imgur.com/q0MQZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q0MQZ.png" alt="enter image description here"></a></p>
  
  <p>Everything BUT the Table container is shadowed. The Text is shadowed if it's on an offwhite Row, the Row is shadowed if it's a white Row, and the <em>border</em> has a shadow! If the border is removed, the wrapping shadow around the Table container (the only shadow I want) is removed as well.</p>
  
  <p>How do I apply the shadow to the container? </p>