react-slip-and-slide/src/Engine.js

##### A react and react-native carousel

import { Context, isInRange, LazyLoad, useDynamicDimension, } from '@react-slip-and-slide/utils';
import React from 'react';
import { ItemBase } from './Item';
import { LayoutManager } from './LayoutManager';
export const Engine = ({ onItemPress, renderItem, }) => {
    const { state: { data, dataLength, itemDimensions, loadingType, visibleItems, OffsetX, }, } = Context.useDataContext();
    const { itemRefs } = useDynamicDimension();
    const shouldRender = React.useCallback((i) => {
        if (loadingType === 'eager') {
            return true;
        }
        return isInRange(i, {
            dataLength,
            viewSize: itemDimensions.width,
            visibleItems: visibleItems || Math.round(dataLength / 2),
            offsetX: OffsetX.get(),
        });
    }, [OffsetX, dataLength, itemDimensions.width, loadingType, visibleItems]);
    return (React.createElement(LayoutManager, null, data.map((item, index) => (React.createElement(LazyLoad, { key: index, render: shouldRender(index) },
        React.createElement(ItemBase, { ref: itemRefs[index], index: index, item: item, renderItem: renderItem, onPress: () => onItemPress(index) }))))));
};