React Navigation Animated Header in Mobile

I've a layout having a Header (React navigation) which is transparent and a ScrollView which contains a banner and other items. What I want to achieve is:

FIRST) To animate the header color on scroll i.e. Transparency decreases. Also note that I need to animate the StatusBar color along.

SECONDLY) To interchange the items in Header using their opacities i.e. one item hides and other one shows up. Plus, I want to hide another item in the banner (in ScrollView)

I'm attaching some images for expected result. Hope it will help understand my requirement easily.

a) There is a logo in header. b) When scroll starts, at specific point, logo disappears and search bar starts appearing in header and disappearing from banner, also header & statusbar colors alpha starts increasing. c) Animation completed. d) End result.

I've almost succeeded with the help of this tutorial.

.

But its not working with Android statusbar. Also it doesn't have interchanging items in header. And it is not using React navigation header but custom header.

from React Navigation Animated Header in Mobile