react-native-zoom-lightbox

Demo

iOS

Android

Getting started

A new version support typescript, latest RN, using react-native-reanimated, react-native-gesture-handle to run animation in UI thread (make sure installed 2 library before install this library)

If you want to use old version use HOC. It's on branch old-version

$ yarn add react-native-zoom-lightbox

Usage

Single Image

import {ZoomImage} from 'react-native-zoom-lightbox';

      <ZoomImage
        style={{
          height: 200,
          width: 400,
          resizeMode: 'contain',
        }}
        source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
      />

Properties

Just use Props of base Image from React Native component

List Image

You need to wrap your container with a provider named ZoomImageProvider and provide data list image and make sure item have property named: "source" then use ZoomImageItem inside for show image (see example)

Item of list must be have 2 properties: source and index (to same with index beside list).

export const EXAMPLE_DATA = [
  {
    index: 0,
    source: 'https://reactnative.dev/img/tiny_logo.png',
  },
  {
    index: 1,
    source:
      'https://scontent.fsgn5-6.fna.fbcdn.net/v/t1.18169-1/11193438_402423169882782_2597021278587966343_n.jpg?stp=c0.4.80.80a_cp0_dst-jpg_p80x80&_nc_cat=108&ccb=1-7&_nc_sid=7206a8&_nc_ohc=ijzswzxrJ0wAX__ihZZ&_nc_ht=scontent.fsgn5-6.fna&oh=00_AfDyTQd2-V2elAOMQtv3hJgG5N_mV4Zarla-C6v5cXvqqQ&oe=64A67468',
  },
  {
    index: 2,
    source: 'https://reactnative.dev/img/tiny_logo.png',
  },
  ...
]

Usage

const Example = () => {
  return (
    <ZoomImageProvider data={EXAMPLE_DATA}>
      <FlatList
        data={EXAMPLE_DATA}
        renderItem={({item, index}) => {
          return (
            <View style={styles.imageContainer} bg="transparent" key={item.id}>
              <ZoomImageItem
                style={styles.imageStyle}
                source={{uri: item.source}}
                index={index}
              />
            </View>
          );
        }}
        keyExtractor={(item: any) => item.id}
      />
    </ZoomImageProvider>
  );
};

or

    <ZoomImageProvider data={EXAMPLE_DATA}>
        <ScrollView>
            <ZoomImageItem
              source={{uri: EXAMPLE_DATA[0].source}}
              index={EXAMPLE_DATA[0].index}
              style={[styles.imageStyle, {marginBottom:20}]}
            />
            <Text>Text Example</Text>
            <ZoomImageItem
              source={{uri: EXAMPLE_DATA[1].source}}
              index={EXAMPLE_DATA[1].index}
              style={[styles.imageStyle, {marginBottom:20}]}
            />
        </ScrollView>
    </ZoomImageProvider>

Properties

ZoomImageProvider Props

Prop	Type	Required	Description
data	array [ ]	yes	Item of list must be have 2 properties: source and index (to same with index outside list)

ZoomImageItem Props

Prop	Type	Required	Description
index	number	yes	It's must be same with id each item provided in ZoomImageProvider
...props	Image Props		Image props from base react native component

Example