text: import { ActivityIndicator, Dimensions, FlatList, View } from "react-native";
  import React, { Component } from "react";
  import PropTypes from "prop-types";
  import { Pagination, Slide } from "./src";
  
  export default class Gallery extends Component {
    constructor(props) {
      super(props);
      this.sendCurrentImageInfo(this.props.data[0]);
      this.state = {
        index: 0
      };
      if (this.props.initialIndex) {
        setTimeout(() => {
          this.goTo(this.props.initialIndex);
        }, 100);
      }
    }
  
    sendCurrentImageInfo = image => {
      if (this.props.setCurrentImage) this.props.setCurrentImage(image);
    };
  
    onScrollEnd = e => {
      const contentOffset = e.nativeEvent.contentOffset;
      const viewSize = e.nativeEvent.layoutMeasurement;
      const pageNum = Math.floor(contentOffset.x / viewSize.width);
      if (pageNum !== this.state.index) {
        this.setState({ index: pageNum });
      }
    };
  
    getItemLayout = (_data, index) => {
      const width = Dimensions.get("window").width;
      return {
        length: width,
        offset: width * index,
        index
      };
    };
  
    goTo = index => {
      this.sendCurrentImageInfo(this.props.data[index]);
      this.setState({ index });
      this.swiper.scrollToOffset({
        offset: Dimensions.get("window").width * index
      });
    };
  
    _renderImage = item => {
      return <Slide {...item} />;
    };
  
    render() {
      const backgroundColor = this.props.backgroundColor || "#000";
      const data = this.props.data || [];
      return (
        <View
          onLayout={this.onLayout}
          style={{
            ...styles.container,
            backgroundColor
          }}
        >
          {!data.length && <ActivityIndicator style={styles.loader} />}
          <FlatList
            onLayout={this.onLayout}
            style={styles.flatList}
            data={data}
            extraData={this.state}
            horizontal
            initialNumToRender={this.props.initialNumToRender || 4}
            ref={ref => (this.swiper = ref)}
            pagingEnabled
            onMomentumScrollEnd={this.onScrollEnd}
            getItemLayout={this.getItemLayout}
            renderItem={img => this._renderImage(img)}
            keyExtractor={item => item.id}
          />
  
          <Pagination
            index={this.state.index}
            data={data}
            initialPaginationSize={this.props.initialPaginationSize || 10}
            goTo={this.goTo}
            backgroundColor={backgroundColor}
          />
        </View>
      );
    }
  }
  
  Gallery.propTypes = {
    backgroundColor: PropTypes.string,
    data: PropTypes.arrayOf((propValue, key) => {
      if (!propValue[key].id || !propValue[key].image) {
        return new Error(
          'Data prop is invalid. It must be an object containing "id" and "image" keys.'
        );
      }
    }),
    setCurrentImage: PropTypes.func
  };
  
  const styles = {
    container: {
      flex: 1,
      flexDirection: "column",
      justifyContent: "space-between"
    },
    flatList: {
      flex: 1,
      width: Dimensions.get("window").width,
      alignSelf: "stretch"
    },
    loader: {
      position: "absolute",
      top: Dimensions.get("window").height / 2 - 10,
      left: Dimensions.get("window").width / 2 - 10
    }
  };
  