gistfile1.txt

// Modal

import { Modal as NativeModal } from "react-native";
import ImageViewer from "react-native-image-zoom-viewer";


class MyView extends React.Component {

  renderImageModal () {
    const image = this.state.selectedImage;
    if (!image) return null;
  
    return (
            <NativeModal
          visible={!!this.state.showImageModal}
          transparent={true}
          onRequestClose={() => {
            this.hideImageModal();
          }}
        >
          <View
            key={image && image.uri}
            style={{ ...StyleSheet.absoluteFillObject }}
          >
            {image && image.uri ? (
              <ImageViewer
                renderImage={(props) => {
                  return <Image {...props}/>
                }}
                imageUrls={[{ url: image && image.uri, props: {}}]}
                renderIndicator={() => null}
              />
            ) : null}
            <View
              style={{
                position: "absolute",
                top: 30,
                left: 4,
                opacity: 0.9,
              }}
            >
              <TouchableOpacity
                onPress={this.hideImageModal.bind(this)}
                style={{ padding: 4 }}
              >
                <Icon name={"x"} type={"feather"} size={24} color={"white"} />
              </TouchableOpacity>
            </View>
          </View>
        </NativeModal>
    )
  }
  
  showImageModal() {
    this.setState({ showImageModal: true });
  }

  hideImageModal() {
    this.setState({ showImageModal: false });
  }
  
  render () {
    return (
      <View>
        { this.renderImageModal() }
        /* ... */
      </View>
    )
  }
}