react-native-hook-image-slider/src/Slide/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;
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const react_1 = require("react");
const react_native_1 = require("react-native");
// TODO add image placeholder (pixelated image)
const Slide = ({ slide, loadingIndicatorColor, totalItemWidth, separatorColor }) => {
    const { width } = react_native_1.Dimensions.get("window");
    const [isLoading, setIsLoading] = react_1.useState(true);
    const handleLoad = react_1.useCallback(() => setIsLoading(false), []);
    return (<react_native_1.View style={styles(separatorColor, totalItemWidth, width).wrapper}>
			<react_native_1.Image resizeMode='cover' source={{ uri: slide }} style={styles(separatorColor, totalItemWidth, width).image} onLoad={handleLoad}/>
			{isLoading && (<react_native_1.View style={styles(separatorColor, totalItemWidth, width).indicatorContainer}>
					<react_native_1.ActivityIndicator size='large' color={loadingIndicatorColor}/>
				</react_native_1.View>)}
		</react_native_1.View>);
};
const styles = (separatorColor, totalItemWidth, width) => react_native_1.StyleSheet.create({
    wrapper: {
        width: totalItemWidth,
        height: 'auto',
        backgroundColor: separatorColor
    },
    image: {
        overflow: "hidden",
        resizeMode: "cover",
        height: '100%',
        width: width,
    },
    indicatorContainer: {
        backgroundColor: "#D3D3D3",
        width,
        height: "100%",
        position: 'absolute',
        justifyContent: "center",
        alignItems: 'center',
    },
});
exports.default = Slide;
//# sourceMappingURL=index.js.map