Sticky Component inside scrollview - react-native

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 from bottom and as you scroll when you hit bottom of the header it stops and start stick while the content keep scrolled
this is my code
<View style={styles.container}>
<ScrollView
style={styles.container}
scrollEventThrottle={16}
onScroll={
Animated.event(
[{nativeEvent:{contentOffset: {y: this.state.scrollY}}}]
)
}
>
{this._renderScrollViewContent()}
</ScrollView>
<View style={styles.stickyStuff}></View>
<Animated.View
style={[styles.header, {height: headerHeight}]}
>
<Animated.Image
source={require('../../assets/images/pvj.jpg')}
style={[styles.backgroundImage, {opacity: imageOpacity}]}
/>
<Animated.View style={[styles.bar, {transform: [{translateY: titleTranslateY}, {translateX: titleTranslateX}]}]}>
<Text style={styles.title}>PARIS VAN JAVA</Text>
</Animated.View>
</Animated.View>
</View>

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

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 4

This can prove useful
import android.os.Build
import android.util.Log
import android.view.View
import android.view.ViewGroup
import android.widget.ScrollView
import androidx.annotation.RequiresApi
import kotlinx.coroutines.handleCoroutineException
#RequiresApi(Build.VERSION_CODES.M)
class StickyViewHistory(val stickyViewInflateListener: StickyViewInflateListener, val scrollView: ScrollView) {
interface StickyViewInflateListener {
fun inflate(view : View)
fun getHeaderViews() : List<View>
fun removeSticky()
fun getStickyHolderView() : View
fun getStickyLayout() : View
}
var currentVisibleHeader : ViewOverLapState? = null
private var isStickyVisible = false
init {
scrollView.setOnScrollChangeListener { view: View, i: Int, newScrollY: Int, i2: Int, oldScrollY: Int ->
val overlapStates = getOverlappStates()
val numberOfHeadersAboveScroll = overlapStates.filter { it == ViewOverLapState.IS_ABOVE }.count()
//If all of the headers are either visible or below the screen, we remove the sticky
if(numberOfHeadersAboveScroll == 0){
if(isStickyVisible == true){
removeSticky()
}
}
else {
if(newScrollY < oldScrollY){
displayHeaderWhenScrollingDown(overlapStates)
}
else {
displayHeaderWhileScrollingUp(overlapStates)
}
}
}
}
/**
* Assumes there is atleast one header view which has scrolled above screen
*/
fun displayHeaderWhileScrollingUp(overlapStates : List<ViewOverLapState>){
val mostRecentAboveHeader = getMostRecentAboveHeader(overlapStates)
val highestVisibleHeader = getHighestVisibleHeader(overlapStates)
//If there is a header on screen which is just about to overlap the current sticky layout we remove the Sticky altogether
highestVisibleHeader?.let {
if(isOverlappingCurrentStickyLayout(it.view)){
removeSticky()
return
}
}
// If the most recent header that has scrolled above screen is the current sticky,
// we dont do anything since its already being displayed as sticky
if(currentVisibleHeader != null && currentVisibleHeader!!.view == mostRecentAboveHeader.view){
//Do nothing
}
else {
//We sticky the most recent header which has scrolled above screen
setSticky(mostRecentAboveHeader)
}
isStickyVisible = true
}
fun displayHeaderWhenScrollingDown(overlapStates : List<ViewOverLapState>){
currentVisibleHeader?.let { cvh ->
val highestVisibleHeader = getHighestVisibleHeader(overlapStates)
highestVisibleHeader?.let { hvh ->
if(isOverlappingCurrentStickyLayout(hvh.view)){
removeSticky()
return
}
}
}
if(currentVisibleHeader == null){
val mostRecentAboveHeader = getMostRecentAboveHeader(overlapStates)
setSticky(mostRecentAboveHeader)
}
}
/**
* Checks if a view is overlapping with any part of the current sticky layout
*/
fun isOverlappingCurrentStickyLayout(childView: View) : Boolean{
val locationOfSticky = IntArray(2)
stickyViewInflateListener.getStickyLayout().getLocationOnScreen(locationOfSticky)
val childLocation = IntArray(2)
childView.getLocationOnScreen(childLocation)
val locationOfScrollView = IntArray(2)
scrollView.getLocationOnScreen(locationOfScrollView)
if(childLocation[1] <= locationOfSticky[1]+stickyViewInflateListener.getStickyLayout().height &&
childLocation[1] >= locationOfScrollView[1]){
return true
}
return false
}
/**
* Get the headerview which most recently scrolled above screen
*/
fun getMostRecentAboveHeader(overlapStates : List<ViewOverLapState>) : ViewOverLapState {
val aboveViews = overlapStates.filter { it == ViewOverLapState.IS_ABOVE }
var lowestAboveView : ViewOverLapState? = null
var highestYCooridnatesoFar = Int.MIN_VALUE
aboveViews.forEach {
val locationOnScreen = IntArray(2)
it.view.getLocationOnScreen(locationOnScreen)
if(locationOnScreen[1] > highestYCooridnatesoFar){
lowestAboveView = it
highestYCooridnatesoFar = locationOnScreen[1]
}
}
return lowestAboveView!!
}
/**
* Highest here does not mean the highest [y] value but its position on the screen, so lower y means higher
*/
fun getHighestVisibleHeader(overlapStates: List<ViewOverLapState>) : ViewOverLapState? {
val insideViews = overlapStates.filter { it == ViewOverLapState.IS_INSIDE }
var highestInsideView : ViewOverLapState? = null
var lowestYCordinatesoFar = Int.MAX_VALUE
insideViews.forEach {
val locationOnScreen = IntArray(2)
it.view.getLocationOnScreen(locationOnScreen)
if(locationOnScreen[1] < lowestYCordinatesoFar){
highestInsideView = it
lowestYCordinatesoFar = locationOnScreen[1]
}
}
return highestInsideView
}
fun getOverlappStates() : List<ViewOverLapState>{
return stickyViewInflateListener.getHeaderViews()
.map {
getOverlapState(scrollView,it)
}
}
/**
* For all of the view headers, get their overlap state with the scroll view
*/
fun getOverlapState(parentView : View, childView : View) : ViewOverLapState{
val scrollViewLocation = IntArray(2)
parentView.getLocationOnScreen(scrollViewLocation)
val childLocation = IntArray(2)
childView.getLocationOnScreen(childLocation)
if(childLocation[1] < scrollViewLocation[1]){
return ViewOverLapState.IS_ABOVE.apply { view = childView }
}
else if(childLocation[1] > (scrollViewLocation[1]+parentView.height)){
return ViewOverLapState.IS_BELOW.apply { view =childView }
}
else {
return ViewOverLapState.IS_INSIDE.apply { view = childView }
}
}
fun setSticky(viewOverLapState: ViewOverLapState){
stickyViewInflateListener.inflate(viewOverLapState.view)
currentVisibleHeader = viewOverLapState
isStickyVisible = true
}
fun removeSticky(){
currentVisibleHeader = null
stickyViewInflateListener.removeSticky()
isStickyVisible = false
}
enum class ViewOverLapState(val text : String) {
IS_INSIDE("inside"),IS_ABOVE("above"),IS_BELOW("below");
lateinit var view : View
}
}