title: How to expose shadow styling outside of ScrollView's container in React Native ios?
body: <p>I have created several cards that each have a shadow and hoped to use ScrollView to scroll through them horizontally. However, I've noticed that since ScrollView must have a bounded height, it cuts off the shadow when adjacent to other components (in the example below, these are Text components). </p>
  
  <p>Here is a picture of what is happening with ScrollView and what I hope to achieve with ScrollView:</p>
  
  <p><a href="https://i.stack.imgur.com/unekn.png" rel="nofollow noreferrer">https://i.stack.imgur.com/unekn.png</a></p>
  
  <p>Here is the code on snack:
  <a href="https://snack.expo.io/SypSytICH" rel="nofollow noreferrer">https://snack.expo.io/SypSytICH</a></p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, SafeAreaView, ScrollView, View } from 'react-native';
  import Constants from 'expo-constants';
  
  export default function App() {
    return (
      &lt;SafeAreaView&gt;
        &lt;View style={{paddingTop: 100}}&gt;
              &lt;Text style={styles.text}&gt;Above ScrollView&lt;/Text&gt;
        &lt;/View&gt;
        &lt;ScrollView horizontal={true} showsHorizontalScrollIndicator={false}&gt;
          &lt;View style={{...styles.card, ...styles.shadow}}&gt;
            &lt;View style={styles.friendImg}&gt;
              &lt;View&gt;&lt;/View&gt;
            &lt;/View&gt;
            &lt;Text style={styles.friendText}&gt;Markus Todd&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{...styles.card, ...styles.shadow}}&gt;
            &lt;View style={styles.friendImg}&gt;
              &lt;View&gt;&lt;/View&gt;
            &lt;/View&gt;
            &lt;Text style={styles.friendText}&gt;Markus Todd&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{...styles.card, ...styles.shadow}}&gt;
            &lt;View style={styles.friendImg}&gt;
              &lt;View&gt;&lt;/View&gt;
            &lt;/View&gt;
            &lt;Text style={styles.friendText}&gt;Markus Todd&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{...styles.card, ...styles.shadow}}&gt;
            &lt;View style={styles.friendImg}&gt;
              &lt;View&gt;&lt;/View&gt;
            &lt;/View&gt;
            &lt;Text style={styles.friendText}&gt;Markus Todd&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{...styles.card, ...styles.shadow}}&gt;
            &lt;View style={styles.friendImg}&gt;
              &lt;View&gt;&lt;/View&gt;
            &lt;/View&gt;
            &lt;Text style={styles.friendText}&gt;Markus Todd&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/ScrollView&gt;
        &lt;View&gt;
              &lt;Text style={styles.text}&gt;Below ScrollView&lt;/Text&gt;
        &lt;/View&gt;
        &lt;View style={{paddingTop: 100}}&gt;
          &lt;Text style={styles.text}&gt;Above&lt;/Text&gt;
          &lt;View style={{...styles.card, ...styles.shadow}}&gt;
              &lt;View style={styles.friendImg}&gt;
                &lt;View&gt;&lt;/View&gt;
              &lt;/View&gt;
              &lt;Text style={{...styles.friendText}}&gt;Markus Todd&lt;/Text&gt;
          &lt;/View&gt;
          &lt;Text style={styles.text}&gt;Below&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/SafeAreaView&gt;
    );
  }
  
  const styles = StyleSheet.create({
    shadow: {
        shadowColor: 'rgba(39, 52, 125, 0.17)',
        shadowOffset: {width: 0, height: 14},
        shadowRadius: 37,
        shadowOpacity: 1,
        boxShadow: '0 14px 37px 0 rgba(39, 52, 125, 0.17)',
    },
    card: {
        backgroundColor: 'rgba(255, 255, 255, 0.89)',
        borderRadius: 4.36,
        width: 98,
        height: 120,
        marginLeft: 11,
    },
    friendImg: {
        justifyContent: 'center',
        paddingTop: 16,
    },
  });
  </code></pre>