Tabview as sticky header in react-native

Question

I'm using one third party library for tabview in react native.ie, React-native-tab-view. I need to create this tabview as a sticky header in table view. Below is exactly how I need that. When I scroll the page the banner will go up but those 3 tabs remain on top. Can someone help on this, please?

Answer 1

I created a sample project on Github. It should do the trick. I used native animations, so I can only animate transform and opacity, which should be pretty fast. One of the problems though is that the nested navigators are not connected, but you should be able to do that. Can't be that hard :P

And for now the banner is shown even if you switch the tab, which may not be the behaviour you want. But I think overall this repo gives you a good starting point. At least I hope so :)

If you want to know how to nest navigators with views in between them you can have a look at a second repo on Github I made today for another SO question. Maybe I'll write a Medium post about this topic. Depends on my spare time I guess :P