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