Collapsible header question

[Veeksi]

Is this a good way to show and hide header with react-native-reanimated? Feels like it works quite well but what do you guys think? How could I improve?

const previousScrollY = useSharedValue(0);
const headerOffset = useSharedValue(0);

const scrollHandler = useAnimatedScrollHandler({
		onScroll: (event) => {
			const currentY = event.contentOffset.y;

			if (currentY > previousScrollY.value) {
				// Scrolling down: hide the header
				const scrollDifference = currentY - previousScrollY.value;
				const newOffset = clamp(
					headerOffset.value - scrollDifference,
					-COLLAPSING_HEADER_HEIGHT,
					0,
				);
				headerOffset.value = newOffset;
			} else if (currentY < previousScrollY.value) {
				// Scrolling up: show the header
				const scrollDifference = previousScrollY.value - currentY;
				const newOffset = clamp(
					headerOffset.value + scrollDifference,
					-COLLAPSING_HEADER_HEIGHT,
					0,
				);
				headerOffset.value = newOffset;
			}

			const maxScrollY =
				event.contentSize.height - event.layoutMeasurement.height;
			previousScrollY.value = clamp(currentY, 0, maxScrollY);
		},
});
	
const transformAnim = useAnimatedStyle(() => {
		return {
			transform: [{ translateY: scrollY.value }],
		};
});

[MatiPl01]

Hey!

Your code looks correct. One thing, I wonder if you need this if ... else if logic. It seems that the only difference is the way in which you calculate and apply the scrollDifference.

In the first case, you calculate scrollDifference as currentY - previousScrollY.value and then, subtract it from the headerOffset.value, which gives you headerOffset.value - (currentY - previousScrollY.value), which is the same as headerOffset.value + previousScrollY.value - currentY

The result is the same in the second case, when you calculate scrollDifference as previousScrollY.value - currentY and then, add the result to headerOffset.value. You get headerOffset.value + previousScrollY.value - currentY, which is the same as before.

Wrapping up, your code looks fine but I would try replacing this:

if (currentY > previousScrollY.value) {
  // Scrolling down: hide the header
  const scrollDifference = currentY - previousScrollY.value;
  const newOffset = clamp(
    headerOffset.value - scrollDifference,
    -COLLAPSING_HEADER_HEIGHT,
    0,
  );
  headerOffset.value = newOffset;
  } else if (currentY < previousScrollY.value) {
  // Scrolling up: show the header
  const scrollDifference = previousScrollY.value - currentY;
  const newOffset = clamp(
    headerOffset.value + scrollDifference,
    -COLLAPSING_HEADER_HEIGHT,
    0,
  );
  headerOffset.value = newOffset;
}

with just:

const newOffset = clamp(
  headerOffset.value + previousScrollY.value - currentY,
  -COLLAPSING_HEADER_HEIGHT,
  0,
);
headerOffset.value = newOffset;

[Veeksi]

Hey,

Thanks for your reply. You are actually correct! Sometimes it is so hard to see mistake like this in own code. Thanks a lot for this. Now I can just remove that unnecessary if-else-if block and that hook looks a lot cleaner!