setCurrentImage

.history/index_20190603131010.js

@@ -0,0 +1,106 @@
+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.state = { index: 0 };
+  }
+
+  componentDidMount() {
+    if (this.props.initialIndex) {
+      setTimeout(() => {
+        this.goTo(this.props.initialIndex);
+      }, 100);
+    }
+  }
+
+  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) {
+    return {
+      length: Dimensions.get('window').width,
+      offset: Dimensions.get('window').width * index,
+      index,
+    };
+  }
+
+  goTo(index) {
+    this.setState({ index });
+    this.swiper.scrollToIndex({ index });
+  }
+
+  render() {
+    const backgroundColor = this.props.backgroundColor || '#000';
+    const data = this.props.data || [];
+    return (
+      <View
+        orientation={this.state.orientation}
+        style={{ ...styles.container, backgroundColor }}
+      >
+        {!data.length &&
+          <ActivityIndicator style={styles.loader} />}
+
+        <FlatList
+          style={styles.swiper}
+          data={data}
+          horizontal
+          initialNumToRender={this.props.initialNumToRender||4}
+          ref={ref => this.swiper = ref}
+          pagingEnabled
+          onMomentumScrollEnd={this.onScrollEnd.bind(this)}
+          getItemLayout={this.getItemLayout.bind(this)}
+          renderItem={img => <Slide {...img} />}
+          keyExtractor={item => item.id}
+        />
+        <Pagination
+          index={this.state.index}
+          data={data}
+          initialPaginationSize={this.props.initialPaginationSize||10}
+          goTo={this.goTo.bind(this)}
+          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.'
+      );
+    }
+  })
+};
+
+const styles = {
+  container: {
+    flex: 1,
+  },
+  loader: {
+    position: 'absolute',
+    top: (Dimensions.get('window').height / 2) - 10,
+    left: (Dimensions.get('window').width / 2) - 10,
+  },
+  swiper: {
+    top: -32,
+  }
+};

.history/index_20190603131135.js

@@ -0,0 +1,99 @@
+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.state = { index: 0 };
+  }
+
+  componentDidMount() {
+    if (this.props.initialIndex) {
+      setTimeout(() => {
+        this.goTo(this.props.initialIndex);
+      }, 100);
+    }
+  }
+
+  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) {
+    return {
+      length: Dimensions.get("window").width,
+      offset: Dimensions.get("window").width * index,
+      index
+    };
+  }
+
+  goTo(index) {
+    this.setState({ index });
+    this.swiper.scrollToIndex({ index: Number(index) });
+  }
+
+  render() {
+    const backgroundColor = this.props.backgroundColor || "#000";
+    const data = this.props.data || [];
+    return (
+      <View
+        orientation={this.state.orientation}
+        style={{ ...styles.container, backgroundColor }}
+      >
+        {!data.length && <ActivityIndicator style={styles.loader} />}
+
+        <FlatList
+          style={styles.swiper}
+          data={data}
+          horizontal
+          initialNumToRender={this.props.initialNumToRender || 4}
+          ref={ref => (this.swiper = ref)}
+          pagingEnabled
+          onMomentumScrollEnd={this.onScrollEnd.bind(this)}
+          getItemLayout={this.getItemLayout.bind(this)}
+          renderItem={img => <Slide {...img} />}
+          keyExtractor={item => item.id}
+        />
+        <Pagination
+          index={this.state.index}
+          data={data}
+          initialPaginationSize={this.props.initialPaginationSize || 10}
+          goTo={this.goTo.bind(this)}
+          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.'
+      );
+    }
+  })
+};
+
+const styles = {
+  container: {
+    flex: 1
+  },
+  loader: {
+    position: "absolute",
+    top: Dimensions.get("window").height / 2 - 10,
+    left: Dimensions.get("window").width / 2 - 10
+  },
+  swiper: {
+    top: -32
+  }
+};

.history/index_20190603132527.js

@@ -0,0 +1,98 @@
+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.state = { index: 0 };
+  }
+
+  componentDidMount() {
+    if (this.props.initialIndex) {
+      setTimeout(() => {
+        this.goTo(this.props.initialIndex);
+      }, 100);
+    }
+  }
+
+  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) {
+    return {
+      length: Dimensions.get("window").width,
+      offset: Dimensions.get("window").width * index,
+      index
+    };
+  }
+
+  goTo(index) {
+    this.setState({ index });
+    this.swiper.scrollToIndex({ index: Number(index) });
+  }
+
+  render() {
+    const backgroundColor = this.props.backgroundColor || "#000";
+    const data = this.props.data || [];
+    return (
+      <View
+        orientation={this.state.orientation}
+        style={{ ...styles.container, backgroundColor }}
+      >
+        {!data.length && <ActivityIndicator style={styles.loader} />}
+        <FlatList
+          style={styles.swiper}
+          data={data}
+          horizontal
+          initialNumToRender={this.props.initialNumToRender || 4}
+          ref={ref => (this.swiper = ref)}
+          pagingEnabled
+          onMomentumScrollEnd={this.onScrollEnd.bind(this)}
+          getItemLayout={this.getItemLayout.bind(this)}
+          renderItem={img => <Slide {...img} />}
+          keyExtractor={item => item.id}
+        />
+        <Pagination
+          index={this.state.index}
+          data={data}
+          initialPaginationSize={this.props.initialPaginationSize || 10}
+          goTo={this.goTo.bind(this)}
+          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.'
+      );
+    }
+  })
+};
+
+const styles = {
+  container: {
+    flex: 1
+  },
+  loader: {
+    position: "absolute",
+    top: Dimensions.get("window").height / 2 - 10,
+    left: Dimensions.get("window").width / 2 - 10
+  },
+  swiper: {
+    top: -32
+  }
+};