I have the following code:

  const ScrollScreen = () => {
    const paddingTop = scrollY.interpolate({
      inputRange: [200, 400],
      outputRange: [0, 100],
      extrapolate: "clamp",
    });
  
    return (
      <ScrollView
        stickyHeaderIndices={[3]}
      >
        <SomeOtherComponent1 />
        <SomeOtherComponent2 />
        <SomeOtherComponent3 />
        <Animated.View style={{ paddingTop }}>
          <Text>Some text </Text>
        </Animated.View>
      </ScrollView>
    );
  };

The idea is to gradually add a padding to the Text component as we scroll up, so that by the time the scroll is past 400px, it has a paddingTop of 100px and will never touch the top of the screen even when fixed via the stickyHeaderIndices property.

I noticed that this works great if we scroll up slowly, but if we do a quick swipe up, the Text component will go all the way to the top of the screen first, before dropping to the expected 100px.

I guess the interpolation doesn’t seem to catch on quick enough, but is there any solution to fix this for quick scrolls?