collapsibleNavBar2.js

import Animated from 'react-native-reanimated';

const {
  event,
  Value,
  diffClamp,
  multiply,
  interpolate,
  cond,
  neq,
} = Animated;
const DRAG_END_INITIAL = 10000000;

class CollapsibleNavBar extends React.Component {
  constructor(props) {
    super(props);
    this.scrollY = new Value(0);
    this.scrollEndDragVelocity = new Value(DRAG_END_INITIAL);

    const diffClampNode = diffClamp(this.scrollY, 0, NAV_BAR_HEIGHT);

    this.animatedNavBarTranslateY = cond(
      // Condition to detect if we stopped scrolling
      neq(this.scrollEndDragVelocity, DRAG_END_INITIAL),
      [], // It's driven by snapping animation (To be implemented)
      multiply(diffClampNode, -1), // Otherwise it's driven by scrolling
    );

    this.animatedTitleOpacity = interpolate(this.animatedNavBarTranslateY, {
      inputRange: [-NAV_BAR_HEIGHT, 0],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.ScrollView
          scrollEventThrottle={1}
          onScroll={event(
            [
              {
                nativeEvent: {
                  contentOffset: {
                    y: this.scrollY,
                  },
                },
              },
            ],
            { useNativeDriver: true },
          )}
          onScrollEndDrag={event(
            [
              {
                nativeEvent: {
                  velocity: {
                    y: this.scrollEndDragVelocity,
                  },
                },
              },
            ],
            { useNativeDriver: true },
          )}
        >
          {Array.from({ length: 60 }).map((_, i) => (
            <View key={i} style={styles.row}>
              <Text>{i}</Text>
            </View>
          ))}
        </Animated.ScrollView>
        [...]
      </View>
    );
  }
}