react-native-image-viewer

Demo

Install

yarn

yarn add @russelrajitha/react-native-image-viewer

npm

npm i @russelrajitha/react-native-image-viewer

Usage

import React, {useCallback, useRef} from 'react';
import {Button, Modal, Text, View} from 'react-native';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
import {ReactNativeImageViewer} from "./src";
import {ReactNativeImageViewerRef} from "./src/react-native-image-viewer.types";

const images = [
    require('./assets/img.png'),
    require('./assets/img1.png'),
    require('./assets/img2.png'),
]

export default function App() {
    const [visible, setVisible] = React.useState(false);
    const [currentIndex, setCurrentIndex] = React.useState(0);
    const pagerRef = useRef<ReactNativeImageViewerRef>(null)
    const pagerRef1 = useRef<ReactNativeImageViewerRef>(null)

    const onChangeIndex = useCallback((index: number) => {
        setCurrentIndex(index);
    }, [])
    return (
        <SafeAreaProvider>
            <SafeAreaView style={{flex: 1}}>
                <ReactNativeImageViewer onChangeIndex={onChangeIndex} ref={pagerRef} images={images}/>
                <Modal visible={visible}>
                    <SafeAreaProvider>
                        <SafeAreaView style={{flex: 1}}>
                            <ReactNativeImageViewer ref={pagerRef1} onChangeIndex={onChangeIndex} images={images}/>
                            <Button title={'Close'} onPress={() => setVisible(false)}/>
                        </SafeAreaView>
                    </SafeAreaProvider>
                </Modal>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <Button title={'Show'} onPress={() => setVisible(true)}/>
                    <Button title={'Set 1'} onPress={() => pagerRef.current?.setIndex(0)}/>
                    <Button title={'Set 2'} onPress={() => pagerRef.current?.setIndex(1)}/>
                    <Button title={'Set 3'} onPress={() => pagerRef.current?.setIndex(2)}/>
                    <Text>Current Image: {currentIndex + 1}/{images.length}</Text>
                </View>
            </SafeAreaView>
        </SafeAreaProvider>
    )
}