react-native-photos-gallery/lib/components/PhotoGallery/PhotoGallery.js

A React Native animated custom photo gallery component

import React, { useMemo } from 'react';
import { FlatList } from 'react-native';
import Animated from 'react-native-reanimated';
import { Constants } from '../../constants';
import { AnimatedImage, ListItem, PhotosModal } from './components';
import { usePhotoGallery } from './hooks';
import styles from './Styles';
const PhotoGallery = ({ data, scaledImageResizeMode = Constants.scaledImageResizeMode, animationCloseSpeed = Constants.animationCloseSpeed, animatedThumbnailScrollSpeed = Constants.animatedThumbnailScrollSpeed, animatedImageDelay = Constants.animatedImageDelay, thumbnailListImageHeight = Constants.thumbnailListImageHeight, thumbnailListImageWidth = Constants.thumbnailListImageWidth, thumbnailListImageSpace = Constants.thumbnailListImageSpace, renderHeader, onImageExpand, flatListProps, listItemProps = {}, modalProps, modalBackgroundProps, modalHeaderProps, modalContentProps, modalContentImageProps, modalFooterProps, modalBackgroundStyle, networkLoaderProps, renderNetworkLoader, networkImageProps, ...rest }) => {
    const { origin, indexValue, selectedItem, onOpen, layoutStyle, onClose, visible, } = usePhotoGallery({ animationCloseSpeed });
    // eslint-disable-next-line react-hooks/exhaustive-deps
    useMemo(() => onImageExpand && onImageExpand({ visible }), [visible]);
    const { containerStyle, imageContainerStyle, imageProps } = listItemProps;
    return (React.createElement(Animated.View, { style: [styles.screen, layoutStyle], ...rest },
        React.createElement(FlatList, { data: data, contentContainerStyle: styles.flatListContentContainerStyle, renderItem: ({ item, index }) => (React.createElement(ListItem, { item: item, onPress: (values) => onOpen(values, item, index), ...{
                    containerStyle,
                    imageContainerStyle,
                    imageProps,
                    networkLoaderProps,
                    renderNetworkLoader,
                    networkImageProps,
                    index,
                } })), numColumns: 2, keyExtractor: item => item.id.toString(), ...flatListProps }),
        React.createElement(PhotosModal, { ...{
                data,
                visible,
                origin,
                onClose,
                index: indexValue,
                modalBackgroundProps,
                modalHeaderProps,
                modalContentProps,
                modalFooterProps,
                renderHeader,
                thumbnailListImageHeight,
                thumbnailListImageWidth,
                thumbnailListImageSpace,
                animationCloseSpeed,
                animatedThumbnailScrollSpeed,
                animatedImageDelay,
                modalBackgroundStyle,
                networkLoaderProps,
                renderNetworkLoader,
                networkImageProps,
            }, item: selectedItem, ...modalProps },
            React.createElement(AnimatedImage, { enableNetworkHandling: true, item: selectedItem, style: styles.imageStyle, resizeMode: scaledImageResizeMode, ...{ networkLoaderProps, renderNetworkLoader, networkImageProps }, ...modalContentImageProps }))));
};
export default PhotoGallery;
//# sourceMappingURL=PhotoGallery.js.map