react-native-imagebox/ImageBox.js

huhuge

import React, { Component,  Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { Animated, TouchableHighlight, View,Image } from 'react-native';
import OverlayImagebox from './overplayImagebox';

export default class ImageBox extends Component {
  static propTypes = {
    activeProps:     PropTypes.object,
    renderHeader:    PropTypes.func,
    renderContent:   PropTypes.func,
    underlayColor:   PropTypes.string,
    backgroundColor: PropTypes.string,
    onOpen:          PropTypes.func,
    onClose:         PropTypes.func,
    springConfig:    PropTypes.shape({
      tension:       PropTypes.number,
      friction:      PropTypes.number,
    }),
    swipeToDismiss:  PropTypes.bool
  };

  static defaultProps = {
    swipeToDismiss: true,
    onOpen: () => {},
    onClose: () => {}
  };

  state = {
    isOpen: false,
    origin: {
      x: 0,
      y: 0,
      width: 0,
      height: 0,
    },
    layoutOpacity: new Animated.Value(1)
  };

  getContent = () => {

    if(this.props.renderContent) {
      return this.props.renderContent();
    } else if(this.props.activeProps) {
      return cloneElement(
        Children.only(this.props.children),

        this.props.activeProps
      );
    }
    return this.props.children;
  }

  getOverlayProps = () => ({
    isOpen: this.state.isOpen,
    origin: this.state.origin,
    renderHeader: this.props.renderHeader,
    swipeToDismiss: this.props.swipeToDismiss,
    springConfig: this.props.springConfig,
    backgroundColor: this.props.backgroundColor,
    children: this.getContent(),
    onClose: this.onClose,
    imagesource : this.props.imagesource,
    imageWidth: this.props.imageWidth,
    imageHeight: this.props.imageHeight,
    imageStyle: this.props.imageStyle,
    timelineShare :this.props.timelineShare,
    sessionShare : this.props.sessionShare,
    images : this.props.images,
    showIndex : this.props.showIndex
  })

  open = () => {

    this._root.measure((ox, oy, width, height, px, py) => {
      this.props.onOpen();

      this.setState({
        isOpen: (this.props.navigator ? true : false),
        isAnimating: true,
        origin: {
          width,
          height,
          x: px,
          y: py,
        },
      }, () => {
        if(this.props.navigator) {
          const route = {
            component: OverlayImagebox,
            passProps: this.getOverlayProps(),
          };
          const routes = this.props.navigator.getCurrentRoutes();
          routes.push(route);
          this.props.navigator.immediatelyResetRouteStack(routes);
        } else {
          this.setState({
            isOpen: true,
          });
        }
        setTimeout(() => {
          this._root && this.state.layoutOpacity.setValue(0);
        });
      });
    });
  }

  close = () => {
    throw new Error('Lightbox.close method is deprecated. Use renderHeader(close) prop instead.')
  }

  onClose = () => {
    this.state.layoutOpacity.setValue(1);
    this.setState({
      isOpen: false,
    }, this.props.onClose); 
    if(this.props.navigator) {
      const routes = this.props.navigator.getCurrentRoutes();
      routes.pop();
      this.props.navigator.immediatelyResetRouteStack(routes);
    }
  }

  handleDoubleClick() {
    this.props.onDoubleClick(this.handleCancel.bind(this))
  }

  render() {

    return (
      <View
        ref={component => this._root = component}
        style={this.props.style}
        onLayout={() => {}}>
        
        <Animated.View style={{opacity: this.state.layoutOpacity}} >
          <TouchableHighlight
            underlayColor={this.props.underlayColor}
            onPress={this.open}>
            <Image  style={this.props.imageStyle} source={{uri:this.props.imagesource}} resizeMode="contain"/>
          </TouchableHighlight>
        </Animated.View>
        
        {this.props.navigator ? false : <OverlayImagebox {...this.getOverlayProps()}/>}

      </View>
    );
  }
}