Replace lightbox

Issue Description

There is a previous issue already but it seems that it was closed as stale. The current lightbox lib is not updated anymore and doesn’t support gestures like pinch to zoom … double tap…

react-native-image-zoom-viewer works very well and is easy to implement.

I have seen it used in another chat library as well.

Happy to work on a PR if there is interest?

Cheers,

[nonotest]

Does not seem to be too much interest.

This should get you started for those who want…

Create your own MessageImage component and …

/* eslint no-use-before-define: ["error", { "variables": false }] */

import React from 'react';
import { Text, View, Modal, SafeAreaView, StyleSheet, TouchableOpacity } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import FastImage from 'react-native-fast-image';

export default class MessageImage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      viewerModalOpen: false,
    };
  }
  render() {
    const { containerStyle, lightboxProps, imageProps, imageStyle, currentMessage } = this.props;
    return (
      <React.Fragment>
        <TouchableOpacity
          onPress={() => {
            this.setState({ viewerModalOpen: true });
          }}
          onLongPress={() => {
            this.props.onLongPress();
          }}
          alignment={this.props.alignment}
          style={[styles.container, containerStyle]}
        >
          <FastImage
            {...imageProps}
            resizeMode={FastImage.resizeMode.cover}
            style={[styles.image, imageStyle]}
            source={{ uri: currentMessage.image }}
          />
        </TouchableOpacity>
        <Modal visible={this.state.viewerModalOpen} transparent={true} onRequestClose={() => {}}>
          <SafeAreaView style={{ flex: 1, backgroundColor: 'transparent' }}>
            <ImageViewer
              imageUrls={[{ url: currentMessage.image }]}
              onCancel={() => {
                this.setState({ viewerModalOpen: false });
              }}
              enableSwipeDown
              renderHeader={() => (
                <TouchableOpacity
                  onPress={() => {
                    this.setState({ viewerModalOpen: false });
                  }}
                >
                  <Text style={styles.closeButton}>Close</Text>
                </TouchableOpacity>
              )}
            />
          </SafeAreaView>
        </Modal>
      </React.Fragment>
    );
  }
}

 

[pierroo]

Issue Description

There is a previous issue already but it seems that it was closed as stale. The current lightbox lib is not updated anymore and doesn’t support gestures like pinch to zoom … double tap…

react-native-image-zoom-viewer works very well and is easy to implement.

I have seen it used in another chat library as well.

Happy to work on a PR if there is interest?

Cheers,

Hello @nonotest ,

There is DEFINITELY interest.

I do miss the pink to zoom feature, would be awesome to have it added in the future.