React Native Gesture Image Viewer
Guide
2.x
Guide
English
2.x

Multi-Instance Management

When you want to efficiently manage multiple GestureViewer instances, you can use the id prop to use multiple GestureViewer components.

GestureViewer automatically removes instances from memory when components are unmounted, so no manual memory management is required.

NOTE

The default id value is default.

import {
  GestureViewer,
  GestureTrigger,
  useGestureViewerController,
  useGestureViewerEvent,
  useGestureViewerState,
} from 'react-native-gesture-image-viewer';

const firstViewerId = 'firstViewerId';
const secondViewerId = 'secondViewerId';

function App() {
  const { goToIndex: goToFirstIndex } = useGestureViewerController(firstViewerId);
  const { goToIndex: goToSecondIndex } = useGestureViewerController(secondViewerId);

  const { currentIndex: firstCurrentIndex } = useGestureViewerState(firstViewerId);
  const { currentIndex: secondCurrentIndex } = useGestureViewerState(secondViewerId);

  useGestureViewerEvent(firstViewerId, 'zoomChange', (data) => {
    console.log(`Gallery zoom: ${data.scale}x`);
  });

  useGestureViewerEvent(secondViewerId, 'zoomChange', (data) => {
    console.log(`Gallery zoom: ${data.scale}x`);
  });

  return (
    <View>
      <GestureTrigger id={firstViewerId}>
        <Pressable>
          <Image source={{ uri }} />
        </Pressable>
      </GestureTrigger>
      <GestureViewer
        id={firstViewerId}
        data={images}
        renderItem={renderImage}
      />
      <Button title="Go to index 2 (first)" onPress={() => goToFirstIndex(2)} />
      <GestureTrigger id={secondViewerId}>
        <Pressable>
          <Image source={{ uri }} />
        </Pressable>
      </GestureTrigger>
      <GestureViewer
        id={secondViewerId}
        data={images}
        renderItem={renderImage}
      />
      <Button title="Go to index 0 (second)" onPress={() => goToSecondIndex(0)} />
    </View>
  );
}