react-native-1app/lib/Fotos.js

import React, { Component } from 'react';
import { Animated, View,Platform ,StyleSheet,TouchableOpacity,TouchableWithoutFeedback,Modal} from 'react-native';
import {Image} from 'react-native-1app';
import ViewPager from 'react-native-1app/lib/pageview/ViewPager';
import ImageViewer from 'react-native-image-zoom-viewer';

export default  class Fotos extends Component {

  constructor(props) {
    super(props);
    this.state = {  open:false,dataSource : new ViewPager.DataSource({ pageHasChanged: (p1, p2) => p1 !== p2,}),lista:[]  };
    if(props.list){
      var resultado=  this.montarLista(props.list);
      this.state.lista = resultado;
      this.state.dataSource = this.state.dataSource.cloneWithPages(resultado) ;
    }
  }

  montarLista(lista=[],tag){
    return (lista||[]).filter(a=>(a&&(a.url_img||a.url))).map(a=>({url_img:a.url||a.url_img}));
  }


  shouldComponentUpdate(nextProps, nextState) {
    if(nextProps!= this.props){
      nextState.lista =  this.montarLista(nextProps.list) ;
      nextState.dataSource =this.state.dataSource.cloneWithPages(nextState.lista) ;
    }
    return true;
  }

  _renderPage( data,  pageID) {
    return (
      <TouchableWithoutFeedback
        style={styles.page}
        disabled={!this.props.zoom}
        onPress={()=>{
          this.setState({open:true})
        }}>
        <Image
          resizeMode={this.props.resizeMode}
          source={{uri: data.url_img}}
          style={[styles.page,{overflow:"hidden"}]} />
      </TouchableWithoutFeedback>
    );
  }

  render() {
    return (
      <View  style={this.props.style}  >
        <ViewPager
          style={styles.box}
          ref={f=>this.pg=f}
          dataSource={this.state.dataSource||[]}
          renderPage={( data,  pageID)=>{
            return this._renderPage( data,  pageID);
          }} isLoop={false} autoPlay={false}
          renderPageIndicator={()=>(
            <Indicador/>
          )}
          />
        <Modal
          animationType={"slide"}
          visible={this.state.open}
          onRequestClose={() => {
            this.setState({open:false})
          }}>
          <TouchableOpacity style={[styles.bottonAction,{left:5}]}
            onPress = {()=>{
              this.setState({open:false});
            }}  >
            <Image style={styles.imagenIcon}
              resizeMode = {"cover"}   source={{uri: iconVoltor, scale: 1}} >
            </Image>
          </TouchableOpacity>
          <ImageViewer
            imageUrls={this.montarLista(this.props.list).map(a=>({url:a.url_img}))}
            index={this.pg&&this.pg.getCurrentPage&&this.pg.getCurrentPage()}
            />
        </Modal>
      </View>
    );
  }
}


class Indicador extends Component {
  propTypes: {
    goToPage: PropTypes.func,
    activePage: PropTypes.number,
    pageCount: PropTypes.number
  }
  renderIndicator(){
    let {pageCount,activePage,goToPage,scrollValue,position}=this.props;
    var indicators = [];
    let inputRange = [];
    for (var i = 0; i < pageCount; i++) {inputRange.push(i)}
    for (var page = 0; page < pageCount; page++) {
      let activo=activePage==page?styles.activo:{};
      const borderColor =position.interpolate({  inputRange,  outputRange: inputRange.map(inputIndex => (inputIndex === page ? "rgba(255,132,46,1)" : "rgba(244,244,244,1)"))});
      const borderWidth =position.interpolate({  inputRange,  outputRange: inputRange.map(inputIndex => (inputIndex === page ? 1.5 : 1))});
      indicators.push(
        <TouchableOpacity
          style={styles.tab} key={'idc_' + page}
          onPress={() => goToPage(page)}>
          <Animated.View style={[styles.dot,activo,{borderColor,borderWidth}]} />
        </TouchableOpacity>
      )
    }
    return indicators;
  }

  render() {
    return (
      <View style={styles.indicators}>
        <View style={styles.tabs}>
          {this.renderIndicator()}
        </View>
      </View>
    );
  }
};
var DOT_SIZE = 9;
var DOT_SAPCE = 4;
var styles = StyleSheet.create({
  tab: {
    alignItems: 'center',
  },
  tabs: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  activo:{
    // borderWidth: 1.5,
    // borderColor: "rgba(255,132,46,1)",
  },
  dot: {
    width: DOT_SIZE,
    height: DOT_SIZE,
    // borderWidth: 1,
    // borderColor: "rgba(244,244,244,1)",
    marginLeft: DOT_SAPCE,
    marginRight: DOT_SAPCE,
    borderStyle: "solid",
  },
  page: {
    flex:1,
    "backgroundColor": "rgba(0,0,0,0.5)",
    "alignSelf": "stretch",
  },
  box: {
    "alignSelf": "stretch",
    flex:1,
  },
  bottonAction:{
    "position": "absolute",
    "borderRadius": 5,
    "flexDirection": "column",
    "alignItems": "center",
    "justifyContent": "center",
    "backgroundColor": "rgba(0,0,0,0.5)",
    "width": 50,
    "height": 50,
    "top": 20,
    zIndex:10000,
  },
  imagenIcon:{
    "width": 30,
    "height": 30,
    "marginLeft": 0,
    "marginTop": 0,
    tintColor:"rgba(255,255,255,1)"
  },
  indicators: {
    flex: 1,
    alignItems: 'center',
    position: 'absolute',
    bottom: 10,
    left: 0,
    right: 0,
    backgroundColor: 'transparent',
  }
});
let iconVoltor=`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXM
AAABIAAAASABGyWs+AAAACXZwQWcAAAAYAAAAGAB4TKWmAAAAUElEQVRIx2NgGAVDCvz//z/q////tbQ0/M9/CHCgpeENo4YPL8NJBujmMVHVdWT6on7
UkpFpiQOx+liIVcjIyLgMmsxVGBkZD9DEF6OAJgAAorj7ZBCISyAAAAAASUVORK5CYII=`