Animated Header jittering on content pagination

Please provide the following:

  1. SDK Version: 42
  2. Platforms(Android/iOS/web/all): iOS

I have a header that needs to slide up when the user scrolls down, and slide down when the user scrolls up. Right now, it does slide up and down as needed, but when the end of the content is reached and the next page is supposed to load, it jitters and doesn’t trigger the next page load.

// ListScreen
import { Animated, StyleSheet, Text, View } from "react-native";

  const headerOffset = useRef(new Animated.Value(0)).current;
  const headerTranslate = Animated.diffClamp(headerOffset, 0, 165).interpolate({
    inputRange: [0, 1],
    outputRange: [0, -1],

return (

// MediaWaterfall
// For my scrollable content I'm using Flipkart's RecyclerListView (

return (
                style={{ flex: 1 }}
                onScroll={(event, offsetX, offsetY) => {
                  onScroll(event, offsetX, offsetY);
                  if (offsetY >= 0) {
                  refreshControl: (
// ListHeader

return (
        marginTop: props.scrollTranslation,

I used marginTop as the property to animate since transform: [{ translateY: props.scrollTranslation }] resulted in the header content being moved up and down as needed but an empty white block in it’s place as if only the text had moved up and down, but the underlying view was still there.

With marginTop however, the entire header moves up and down as needed, but when the end of RecyclerListView is reached and more content is supposed to be loaded, the RecyclerListView jitters and is unable to trigger the next page load.

Any help would be greatly appreciated!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.