@cometchat/chat-uikit-react-native/lib/shared/views/CometChatImageViewerModal/ImageViewerModal.js

Ready-to-use Chat UI Components for React Native

import React, { useLayoutEffect, useState } from "react";
import { ActivityIndicator, Image, Modal, SafeAreaView, StyleSheet, TouchableOpacity, View, } from "react-native";
import { ReactNativeZoomableViewWithGestures } from "../../libs/ImageZoom";
import { ICONS } from "./resources";
export const ImageViewerModal = ({ imageUrl, isVisible, onClose }) => {
    const [downloaded, setDownloaded] = useState(false);
    useLayoutEffect(() => {
        Image.prefetch(imageUrl.uri).then((res) => {
            setDownloaded(res);
        });
        Image.getSize(imageUrl.uri, (res) => {
            console.log("success : ", res);
        }, (res) => {
            console.log("error : ", res);
        });
    }, []);
    return (<Modal animationType='slide' transparent={false} visible={isVisible} onRequestClose={onClose}>
      <SafeAreaView style={styles.centeredView}>
        <View style={styles.container}>
          <View style={styles.header}>
            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
              <Image source={ICONS.backIcon} style={{ tintColor: "#fff", height: 20, width: 20 }}/>
            </TouchableOpacity>
          </View>
          {downloaded ? (<View style={styles.imageContainer}>
              <ReactNativeZoomableViewWithGestures onSwipeDown={onClose}>
                <Image source={imageUrl} style={styles.imageStyle} resizeMode='contain'/>
              </ReactNativeZoomableViewWithGestures>
            </View>) : (<ActivityIndicator color={"#fff"}/>)}
        </View>
      </SafeAreaView>
    </Modal>);
};
const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        zIndex: 1,
        elevation: 1,
    },
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#000",
    },
    header: {
        position: "absolute",
        top: 0,
        backgroundColor: "transparent",
        justifyContent: "flex-start",
        width: "100%",
        zIndex: 100,
    },
    imageContainer: {
        flex: 1,
        height: "100%",
        width: "100%",
    },
    imageStyle: {
        width: "100%",
        height: "100%",
    },
    closeButton: {
        zIndex: 10,
        height: 60,
        width: 60,
        justifyContent: "center",
        alignItems: "center",
        elevation: 10,
    },
});
//# sourceMappingURL=ImageViewerModal.js.map