title: React Navigation (native): Overflow visible not working on custom header
body: <p>I'm implementing a custom header for @react-navigation/native-stack. Using React Navigation v6.
  One of the elements within the custom header has a native shadow on iOS added (via the <code>style</code> prop). The shadow is a tad bigger than the header and unfortunately, I can't get it to display beyond the boundaries of the header. Of course, I've tried using <code>overflow: visible</code> on basically every component in the tree, but no success. The shadow is clipped off:
  <a href="https://i.stack.imgur.com/vhOCY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vhOCY.jpg" alt="enter image description here" /></a></p>
  <p>Here's my custom header:</p>
  <pre class="lang-js prettyprint-override"><code>function CustomHeader(props: NativeStackHeaderProps) {
    const { options, route, navigation } = props;
  
    const insets = useSafeAreaInsets();
    const headerHeight = Helpers.getHeaderHeight(insets);
  
    return (
      &lt;View style={{
        height: headerHeight,
        paddingTop: insets.top,
        width: '100%',
        backgroundColor: Colors.white,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 20,
        paddingRight: 20,
        overflow: 'visible',
      }}
      &gt;
        &lt;View style={{
          flex: 1, display: 'flex', alignItems: 'flex-start',
        }}
        &gt;
          { options.headerLeft ? options.headerLeft({ canGoBack: false }) : (
            &lt;TouchableOpacity
              onPress={() =&gt; route.name === 'Home'
                ? null
                : navigation.reset({ index: 0, routes: [{ name: 'Home' }] })}
            &gt;
              &lt;Image
                style={{ width: Sizing.logo, height: Sizing.logo }}
                source={Logo}
              /&gt;
            &lt;/TouchableOpacity&gt;
          )}
        &lt;/View&gt;
        &lt;Text style={{
          textAlign: 'center', color: Colors.purple,
        }}
        &gt;
          {(options.title || route.name).toUpperCase()}
        &lt;/Text&gt;
        &lt;View style={{
          flex: 1, display: 'flex', alignItems: 'flex-end', overflow: 'visible',
        }}
        &gt;
          { options.headerRight ? options.headerRight({ canGoBack: false }) : null}
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  <p>The button on the right with the shadow is passed in through the <code>headerRight</code> option and contains this shadow style:</p>
  <pre><code>nativeShadow: {
    shadowColor: Colors.gray,
    shadowOffset: { width: 0, height: 8 },
    shadowRadius: Colors.shadows.gray.distance,
    shadowOpacity: 0.5,
  },
  </code></pre>
  <p>Any idea what I could try next? I don't want to increase the headers' height since this would break the layout elsewhere.</p>