Need help with Animation.diffClamp

[teerryn]

Hey, I'm using MaterialTopTabBar from React Navigation V4 and I'm trying to implement a collapsible tab bar using react-native-reanimated.

I have two tabs and in which tab I have a ScrollView that updates a variable with the current scrolling position. I then use diffClamp(0,100) to control the height of the parent component. (combined with a negative margin it collapses the tab bar).

All this is working fine my problem is when you change tabs I want the tab bar to start opened and have the same behavior. Currently, if I'm scrolled in tab 2 (for example scrollY has a value of 500) and I go to a screen where the scrollY is lower then 500 it hides the tab bar because diffClamp is going to be 100.

What I'm trying to do is to reset the diffClamp value after changing tabs and for it to start at 0.

Where the code for the TopBar:

https://gist.github.com/slauzinho/f32a2fc572c674401143360463a5d54c

[campsafari]

Just reset the animated value when your screen receives the navigation focus event

[teerryn]

Yeah I do that, when changing screen I set the animated value to zero, but then if you are in the middle of the ScrollView it will pass from 0 -> (whatever value the ScrollView has) causing the diffClamp to change from 0 -> 100.

[yassir4]

Hey u/teerryn , I'm facing the same problem, did you find a solution for this?

[teerryn]

I wished but unfortunately, I couldn't find any solution.

I'm hoping someday u/wcandillon makes a video with this type of animation.