Animated Header jittering on content pagination

[amohile]

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 (
...
          <ListHeader
            scrollTranslation={headerTranslate}
          />
          <MediaWaterfall
            scrollOffsetValue={headerOffset}
          />

)

// MediaWaterfall
// For my scrollable content I'm using Flipkart's RecyclerListView (https://github.com/Flipkart/recyclerlistview)

return (
             ...
              <RecyclerListView
                style={{ flex: 1 }}
                onEndReached={loadNextPage}
                dataProvider={dataProvider}
                layoutProvider={layoutProvider}
                rowRenderer={rowRenderer}
                onScroll={(event, offsetX, offsetY) => {
                  onScroll(event, offsetX, offsetY);
                  if (offsetY >= 0) {
                    props.scrollOffsetValue.setValue(offsetY);
                  }
                }}
                scrollViewProps={{
                  refreshControl: (
                    <RefreshControl
                      refreshing={isRefreshing}
                      onRefresh={onRefresh}
                    />
                  ),
                }}
                showVerticalScrollIndicator={false}
              />
)

// ListHeader

return (
    <Animated.View
      style={{
        marginTop: props.scrollTranslation,
      }}
    >
    ...
    </Animated.View>
)

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!