Ajout de vues animées lors du défilement

App.tsx

  renderHeader() {
    const { scrollOffset } = this.state;
    const expandedHeaderHeight = 240;
    const collapsedHeaderHeight = 64;
    const titleHeight = 44;
    const scrollSpan = expandedHeaderHeight - collapsedHeaderHeight;

    return (
      <Animated.View
        style={{
          height: expandedHeaderHeight,
          zIndex: 100,
          overflow: "hidden",
          // Déplacement du header vers le haut afin de réduire sa hauteur
          transform: [
            {
              translateY: Animated.subtract(
                scrollOffset,
                scrollOffset.interpolate({
                  inputRange: [0, scrollSpan],
                  outputRange: [0, scrollSpan],
                  extrapolate: "clamp",
                })
              ),
            },
          ],
        }}
      >
        <Animated.Image
          style={{
            width: "100%",
            height: "100%",
            // Déplacement de l'image de fond vers le bas à une vitesse 2 fois plus faible
            transform: [
              {
                translateY: scrollOffset.interpolate({
                  inputRange: [0, scrollSpan],
                  outputRange: [0, scrollSpan / 2],
                  extrapolate: "clamp",
                }),
              },
            ],
          }}
          source={require("./cover.jpg")}
        />
        <Animated.View
          style={[
            StyleSheet.absoluteFill,
            {
              backgroundColor: "black",
              // Apparition d'un overlay noir semi-transparent
              opacity: scrollOffset.interpolate({
                inputRange: [scrollSpan / 2, scrollSpan],
                outputRange: [0, 0.85],
                extrapolate: "clamp",
              }),
            },
          ]}
        />
        <Animated.Text
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 16,
            fontSize: 16,
            fontWeight: "bold",
            textAlign: "center",
            color: "white",
            // Déplacement du titre vers le haut afin de le faire apparaitre progressivement
            transform: [
              {
                translateY: scrollOffset.interpolate({
                  inputRange: [scrollSpan, scrollSpan + titleHeight],
                  outputRange: [titleHeight, 0],
                  extrapolate: "clamp",
                }),
              },
            ],
          }}
        >
          BORDEAUX
        </Animated.Text>
      </Animated.View>
    );
  }