react-native-hook-image-slider/src/Content/index.js

React Native Image Slider UI component built with react hooks

"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const Slide_1 = __importDefault(require("../Slide"));
const Content = React.memo(({ images, setActiveIndex, imageHeight, loadingIndicatorColor, separatorColor, separatorWidth }) => {
    const { width } = react_native_1.Dimensions.get("window");
    // This is why I use ref https://github.com/facebook/react-native/issues/17408
    const onViewConfigRef = React.useRef({
        viewAreaCoveragePercentThreshold: 60,
        waitForInteraction: false
    });
    const onViewRef = React.useRef((info) => {
        if (info?.changed?.[0]) {
            if (info.changed[0].index === null) {
                setActiveIndex(0);
            }
            else if (info.changed[0].isViewable) {
                setActiveIndex(info.changed[0].index);
            }
        }
    });
    const totalItemWidth = width + separatorWidth;
    return (<react_native_1.FlatList style={{ width: totalItemWidth, height: "100%" }} showsHorizontalScrollIndicator={false} horizontal data={images} keyExtractor={(url, index) => `${url}-${index}`} viewabilityConfig={onViewConfigRef.current} onViewableItemsChanged={onViewRef.current} decelerationRate="fast" bounces={false} pagingEnabled getItemLayout={(data, index) => ({
        length: width,
        offset: totalItemWidth * index,
        index,
    })} renderItem={({ item }) => <Slide_1.default totalItemWidth={totalItemWidth} separatorColor={separatorColor} slide={item} loadingIndicatorColor={loadingIndicatorColor}/>}/>);
});
exports.default = Content;
//# sourceMappingURL=index.js.map