Description:
image-viewing is a tiny React Native component to view images in a cross-platform modal component.
Features:
- Pinch zoom for both iOS and Android
- Double tap to zoom for both iOS and Android
- Supports swipe-to-close animation
- Custom header and footer components
- Uses VirtualizedList to optimize image loading and rendering
Install & Import:
# Yarn $ yarn add react-native-image-viewing # NPM $ npm i react-native-image-viewing --save
import ImageView from "react-native-image-viewing";
Add images to the image viewer:
const images = [
{
uri: "1.jpg",
},
{
uri: "2.jpg",
},
{
uri: "3.jpg",
},
];
const [visible, setIsVisible] = useState(false);
<ImageView
images={images}
imageIndex={0}
visible={visible}
onRequestClose={() => setIsVisible(false)}
/>;Default Props.
images: ImageSource[];
imageIndex: number;
visible: boolean;
onRequestClose: () => void;
onLongPress?: (image: ImageSource) => void;
onImageIndexChange?: (imageIndex: number) => void;
presentationStyle?: ModalProps["presentationStyle"];
animationType?: ModalProps["animationType"];
backgroundColor?: string;
swipeToCloseEnabled?: boolean;
doubleTapToZoomEnabled?: boolean;
delayLongPress?: number;
HeaderComponent?: ComponentType<{ imageIndex: number }>;
FooterComponent?: ComponentType<{ imageIndex: number }>;Preview:
