applyWindowCorrection usage

README.md

ApplyWindowCorrection API usage

Usage example

applyWindowCorrection in action

Drive link

App.jsx

import React from 'react';
import {
    View, Text
} from 'react-native';
import {
    RecyclerListView,
    DataProvider,
    LayoutProvider
} from 'recyclerlistview';
import StickyContainer from 'recyclerlistview/sticky';
export default class StickySample extends React.Component {

    constructor(props) {
        super(props);
        this._setRef = this._setRef.bind(this);

        this._recyclerRef = null;
        this.data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 6, 7, 8, 9, 10, 11];
        this.dataProvider = new DataProvider((r1, r2) => {
            return r1 !== r2;
        });
        this.dataProvider = this.dataProvider.cloneWithRows(this.data);
        this.layoutProvider = new LayoutProvider(
            index => {
                return index;
            },
            (type, dimension) => {
                dimension.height = 100;
                dimension.width = 360;
            }
        );
    }

    _rowRenderer = (type, data, index) => {
        let color = 'grey';
        switch (index % 6) {
            case 0:
                color = "purple";
                break;
            case 1:
                color = "green";
                break;
            case 2:
                color = "blue";
                break;
            case 3:
                color = "red";
                break;
            case 4:
                color = "yellow";
                break;
            case 5:
                color = "orange";
                break;
        }
        return (
            <View style={{
                height: 100,
                backgroundColor: color,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Text style={
                    {
                        fontSize: 32
                    }
                } > {
                        index
                    } </Text>
            </View>
        );
    };

    /**
     * This method is called whenever a view has to be stuck as a header or footer.
     * Override the views for whichever sticky view requires changes.
     * Eg. This can be used to add shadows etc. to the views once they stick.
     */
    _overrideRowRenderer = (type, data, index) => {
        const view = this._rowRenderer(type, data, index);
        switch (index) {
            case 7: // Only overriding sticky index 7, sticky indices 3 and 10 will remain as they are.
                const color = "cyan";
                return (<View
                    style={
                        {
                            height: 100,
                            backgroundColor: color,
                            alignItems: 'center',
                            justifyContent: 'center'
                        }
                    } >
                    <Text style={
                        {
                            fontSize: 32
                        }
                    } > Overridden sticky </Text>
                </View>
                );
                break;
        }
        return view;
    };

    /**
     * this method is invoked upon scrolling the recyclerlistview, and provides current X offset, Y offset and WindowCorrection object.
     * WindowCorrection has 3 params that can be used to change the perceived viewability of items present.
     * 
     * The value of startCorrection and endCorrection is provided to StickyContainer upon scroll.
     * current offset can be used to dynamically calculate the correctional offset to be provided.
     * 
     * @param {current X offset value} offsetX 
     * @param {current Y offset value} offsetY 
     * @param {*} windowCorrection 
     */
    _applyWindowCorrection(offset, offsetY, windowCorrection) {
        // Provide a positive value to startCorrection to shift the Top Sticky widget downwards.
        windowCorrection.startCorrection = -20; 
        
        // Provide a positive value to endCorrection to shift the Bottom Sticky widget upwards.
        windowCorrection.endCorrection = 20;
    }

    render() {
        return (
            <StickyContainer stickyHeaderIndices={[3, 7, 10]}
                stickyFooterIndices={[3, 7, 10]}
                overrideRowRenderer={this._overrideRowRenderer}
                applyWindowCorrection={this._applyWindowCorrection}
            >
                <RecyclerListView layoutProvider={this.layoutProvider}
                    ref={this._setRef}
                    dataProvider={this.dataProvider}
                    rowRenderer={this._rowRenderer}
                    showsVerticalScrollIndicator={false}
                />
            </StickyContainer>
        );
    }

    _setRef(recycler) {
        this._recyclerRef = recycler;
    }
}