Utilisation d'Animated pour rendre fixe l'entête

App.tsx

  // scrollOffset est maintenant une Animated.Value
  state = { text: "", scrollOffset: new Animated.Value(0) };

  render() {
    // Utilisation d'Animated.event pour mettre à jour scrollOffset lors de l'évènement onScroll
    const scrollEvent = Animated.event(
      [{ nativeEvent: { contentOffset: { y: this.state.scrollOffset } } }],
      { useNativeDriver: true }
    );
    return (
      <Animated.ScrollView
        style={{ flex: 1, backgroundColor: "white" }}
        onScroll={scrollEvent}
        scrollEventThrottle={1}
      >
        {this.renderHeader()}
        {this.renderContent()}
      </Animated.ScrollView>
    );
  }

  renderHeader() {
    const headerHeight = 240;
    return (
      // Utilisation d'Animated.View pour associer la valeur animée à la props translateY
      <Animated.View
        style={{
          height: headerHeight,
          transform: [{ translateY: this.state.scrollOffset }],
          zIndex: 100,
        }}
      >
        /* ... */
      </Animated.View>
  }