Sticky Component inside scrollview

Thank you for answering my first question. I found it how to do it now. So basically what I do is I cheat on F8App code where they fallback from F8Scrolling native module if it is not available to this:

if (!NativeModules.F8Scrolling) {
  var distance = EMPTY_CELL_HEIGHT - this.state.stickyHeaderHeight;
  var translateY = 0; this.state.anim.interpolate({
    inputRange: [0, distance],
    outputRange: [distance, 0],
    extrapolateRight: 'clamp',
  });
  transform = [{translateY}];
}

which gives the idea of animating my sticky view so here is i ended up

const stickySegmentControlX = this.state.scrollY.interpolate({
    inputRange: [0, STICKY_SCROLL_DISTANCE],
    outputRange: [INIT_STICKY_HEADER, HEADER_MIN_HEIGHT],
    extrapolate: 'clamp'
})

...

    return(
    ....
     <Animated.View ref="stickyHeader" style={[styles.stickyStuff, {top: stickySegmentControlX}]}>
       <Text>Go Stick</Text>
     </Animated.View>
    ....
   );

so basically what I've done is animating the top position of an {position: 'absolute'}'s view while as the value of output range is between bottom position to the height of my header (so it'll stop right below my header) and the input range is between 0 and the difference of the top position and the header height. Eventually, the animation will feel natural as you scroll the scrollview.

There you go a sticky header custom view. Here is the result:

If you feel my answer is confusing, its better you heading to janic duplessis Medium post:
React Native ScrollView animated header

It is very simple with ScrollView component. There is already something called "stickyHeaderIndices" which takes the index of child to make sticky.In following code, content inside renderComponent2 stays sticky when you scroll.

<ScrollView
      stickyHeaderIndices={[1]}
      showsVerticalScrollIndicator={false}
 >
  {this.renderComponent1()}
  {this.renderComponent2()}
  {this.renderComponent3()}
 </ScrollView>

Refer: https://facebook.github.io/react-native/docs/scrollview.html#stickyheaderindices

This is very easy you just need to know the index component that you want it to sticky during scrolling inside a scrollview component. Here is an example:

 <ScrollView
      style={styles.screen}
      stickyHeaderIndices={[0]}
 >
     <View><Text>Hello1</Text></View>
     <View><Text>Hello2</Text></View>
     <View><Text>Hello3</Text></View>
 </ScrollView>

So when scrolling Hello1 text will sticky to the top of the ScrollView

Good Luck