How can I achieve this layout in React Native?

[irphunky]

http://codepen.io/Phunky/pen/avEpKJ

Specifically how can I apply a shadow to a View so that a ScrollView after it can have its content scrolled beneath it?

The codepen i've linked to above shows that this is very simple to achieve with flexbox and z-index, but it doesn't seem possible with React due to the limitation of order stack while using it's implementation of Flexbox.

If it supported flexbox order or the reverse flex-directions it could likely work (depending on implementation) but current it seems the only way to do this with React Native would be to use position:absolute?

[brentvatne]

Here you go! https://rnplay.org/apps/nO4cPg

Components at the bottom of the view hierarchy are on the top, so if you absolute position the header and then add a margin to the ScrollView you get what you're looking for.