title: React-native <View> component's "elevation" style is causing ugly shadows
body: <p>The elevation style attribute enables box-shadows for Android 5.0+.</p>
  
  <p>Am I doing something unusual with 'elevation' here to cause the ugliness that can be seen in the screenshot below?  Also, is there any way to define a shadow-offset?</p>
  
  <p>The emulator is running 6.0 (> 5.0), so that's not the problem.  I'm running react-native 25.1.</p>
  
  <pre><code>  "dependencies": {
      "react": "^0.14.8",
      "react-native": "^0.25.1",
      "react-native-gcm-android": "^0.2.0",
      "react-native-material-design": "^0.3.5",
      "react-native-system-notification": "^0.1.10",
      "react-redux": "^4.4.5",
      "redux": "^3.5.2"
    }
  </code></pre>
  
  <p><a href="http://facebook.github.io/react-native/docs/view.html#style" rel="noreferrer">Here's react-native's documentation for View component styling</a></p>
  
  <p>Here's my render method:</p>
  
  <pre><code>  render() {
      return (
        &lt;ListView
          dataSource={alertData}
          renderRow={(rowData) =&gt;
            &lt;View style={style.cardContainer}&gt;
              &lt;Text&gt;{rowData.blah}&lt;/Text&gt;
              &lt;Text&gt;{"#" + rowData.foo}&lt;/Text&gt;
              &lt;Text&gt;{rowData.blah}&lt;/Text&gt;
              &lt;Text&gt;{rowData.foo}&lt;/Text&gt;
              &lt;Text&gt;{rowData.baz}&lt;/Text&gt;
            &lt;/View&gt;
          }
        /&gt;
      );
    }
  </code></pre>
  
  <p>And the style declaration:</p>
  
  <pre><code>var style = StyleSheet.create({
    cardContainer : {
      elevation   : 3,
      flex        : 1,
      margin      : 10,
      padding     : 10,
      borderWidth : 2,
      borderColor : beeStyles.colors.lightGray
    }
  });
  </code></pre>
  
  <p>Which somehow it results in this ...</p>
  
  <p><a href="https://i.stack.imgur.com/e8ThV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/e8ThV.png" alt="enter image description here"></a></p>