Sticky Component inside scrollview

Question

I\'m trying to build a a sticky component like this app

http://www.screencapture.ru/file/E88F08Fc

Deals, Products, Events tabs/segmentControl are actually start

Answer 1

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

Answer 2

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

Answer 3

I've found this parallax scroll view module. It does that kind of behaviour.

react-native-parallax-scroll-view

Answer 4

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

Answer 5

You could put all of your content inside a ScrollView, place the sticky header in there, then use a second ScrollView inside the main view for the rest of the content. Something like this:

<View style={styles.container}>
    <ScrollView style={styles.mainScrollView}>
        <View style={styles.header}>
            // Header content here
        </View>

        <ScrollView style={styles.scrollableContent}>
            // Scrollable content here
        </ScrollView>
     </ScrollView>
</View>

Set the height for the second ScrollView so that it takes only a part of the available space, that way the header will stay visible at the top.