I am trying to make the tabBar from materialToptabNavigator sticky to an animated view inside the parent screen that acts as a header for all the tabs. I have seen some examples with other libraries that do this, but I haven't found one that uses react-navigation version 4. Furthermore I need it to stick only after the view is done animating, so I probably will have to keep passing the scrollY value of the scrollView to the styles of tabnavigator until it reaches HeaderMinHeight (new height of view when fully animated). I don't know if I can change the styles of TabBar dynamically or if adding a custom tabBarComponent is the way to go.
Here is my parentScreen with nested toptabNav: https://youtu.be/IrSLVpoPmj0
This is what im trying to achieve: https://youtu.be/B5wv8jFGNUo
I'm sorry I couldn't post it in gif form, stackOverflow wont let me yet. If there is anyway possible that you could point me to a possible solution or example, that would be great. I dont want to install any third party libraries for this. Any help at all is very appreciated.
Versions:
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.6.2",
"react-native": "0.61.5",
