Doess diffClamp removed or replaced in v2

[umardevid]

in the previous version I see the Reanimated have a method naming diffClamp but in v2 is there removed or replaced?
[https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/nodes/diffClamp/](diffclamp v1)

[jakub-gonet]

It's still exported.

[umardevid]

does it same way like previous version?

[umardevid]

I'm just do this for hiding header on scroll up but didn't work

import React from 'react';
import { StyleSheet, View } from 'react-native';
import ReAnimated, { diffClamp, interpolate, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
import data from './data';
import Header from './Header';

const AnimatedPage: React.FC = () => {
  const scrollY = useSharedValue(0);
  // const diffClampY = diffClamp(scrollY.value, 0, 56);
  const headerY = interpolate(scrollY.value, [0, 56], [0, -56]);

  const scrollHandler = useAnimatedScrollHandler((event) => {
    scrollY.value = event.contentOffset.y;
  });

  const rStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateY: headerY }],
    };
  });

  return (
    <View style={styles.container}>
      <ReAnimated.View style={rStyle}>
        <Header />
      </ReAnimated.View>
      <ReAnimated.ScrollView
        scrollEventThrottle={16}
        onScroll={scrollHandler}
      >
        {
          data.map((_, index) => (
            <View key={index} style={{ height: 90, margin: 15, backgroundColor: 'grey' }}></View>
          ))
        }
      </ReAnimated.ScrollView>
    </View>
  );
}

export default AnimatedPage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  card: {
    height: 90,
    margin: 15,
    backgroundColor: 'grey',
  }
});

[jakub-gonet]

You're mixing Reanimated v1 with Reanimated v2. diffClamp only works with nodes (from Reanimated v1). If you want to clamp animated value between two values, write your own function.

E.g.:

function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
};

so you can use it like so:

clamp(scrollY.value, 0, 56)

[umardevid]

what about interpolate method in v2?

[jakub-gonet]

Interpolate is exported for Reanimated 2. API changed a little:

function interpolate(x, input, output, type)

where type is one of ["extend", "clamp", "identity"] ("extend" by default)

If you want to interpolate Reanimated v1 nodes, use interpolateNode instead.

[Sfirleaalex]

This is another approach of mimic diffClamp from V1. The advantage is you do not have to set bounces=false on scrollview

const useAnimatedCollapsingHeader = (
    animatedValue: Animated.SharedValue<number>,
    backupValue: Animated.SharedValue<number>,
    MAX_HEIGHT: number,
) => {
    const scrollHandler = useAnimatedScrollHandler({
        onScroll: event => {
            const newValue = animatedValue.value + event.contentOffset.y - backupValue.value;

            animatedValue.value = Math.min(Math.max(newValue, 0), MAX_HEIGHT);
            backupValue.value = Math.max(0, event.contentOffset.y);
        },
    });

    const animatedStyles = useAnimatedStyle(() => ({
        transform: [
            {
                translateY: interpolate(
                    animatedValue.value,
                    [0, MAX_HEIGHT],
                    [0, -MAX_HEIGHT],
                    Extrapolate.CLAMP,
                ),
            },
        ],
    }));

    return { scrollHandler, animatedStyles };
};

[Linuhusainnk]

How to implement similar behaviour in v3 to hide on scroll down and to show up on starting to scroll up from all position

[ypohrebennyk]

you can do it like that:

import { useCallback } from "react";
import { type LayoutChangeEvent } from "react-native";
import {
  Extrapolation,
  interpolate,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
  clamp,
  useAnimatedReaction
} from "react-native-reanimated";

export const useHeaderAnimatedStyles = () => {
  const headerHeight = useSharedValue(0);

  const scrollY = useSharedValue(0);
  const animatedValue = useSharedValue(0);

  useAnimatedReaction(
    () => scrollY.value,
    (currentValue, previousValue) => {
      /** Replicated implementation of `clampDiff` to show the header just after the user start scrolling up */
      const newValue =
        animatedValue.value + currentValue - Math.max(0, previousValue ?? 0);

      animatedValue.value = clamp(newValue, 0, headerHeight.value);
    }
  );

  const handleHeaderOnLayout = useCallback(
    (e: LayoutChangeEvent) => {
      headerHeight.value = e.nativeEvent.layout.height;
    },
    [headerHeight]
  );

  const handleScroll = useAnimatedScrollHandler((event) => {
    scrollY.value = event.contentOffset.y;
  });

  const animatedStyles = useAnimatedStyle(() => {
    if (!headerHeight.value || !animatedValue.value) return {};

    return {
      transform: [
        {
          translateY: interpolate(
            animatedValue.value,
            [0, headerHeight.value],
            [0, -headerHeight.value],
            Extrapolation.CLAMP
          )
        }
      ]
    };
  }, [headerHeight, animatedValue]);

  return {
    handleHeaderOnLayout,
    animatedStyles,
    handleScroll
  };
};