Paginator

gistfile1.txt

import React from "react";
import { FlatList, PanResponder, View, Image } from "react-native";

class Paginator extends React.Component {

  // can ignore the color getAccentColor and this.props.onPaginatorScroll stuff.

  getAccentColor(index) {
    if (index % 4 == 0) return "#FF9F5D";
    if (index % 3 == 0) return "#FF8EAC";
    if (index % 2 == 0) return "rgba(76,163,135,1)";
    if (index % 1 == 0) return "#558BFF";
  }
  isLegitIndex(index, length) {
    if (index < 0 || index >= length) return false;
    return true;
  }

  onMagicMove = (x, velocity) => {
    const { itemWidth, itemOffset } = this.props;
    const tbw = itemWidth + 2 * itemOffset;
    const nextIndex =
      velocity > 0
        ? Math.ceil((x - itemOffset) / tbw)
        : Math.floor((x - itemOffset) / tbw);

    if (this.isLegitIndex(nextIndex, this.props.data.length)) {
      const newColor = this.getAccentColor(nextIndex + 1);
      this.props.onPaginatorScroll(newColor);
      this.flatlist.scrollToIndex({ index: nextIndex, animated: true });
    }
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          ref={ref => (this.flatlist = ref)}
          data={this.props.data}
          renderItem={this.props.renderItem}
          horizontal
          showsHorizontalScrollIndicator={false}
          getItemLayout={this.props.getItemLayout}
          contentContainerStyle={this.props.contentContainerStyle}
          onScrollEndDrag={e => {
            this.onMagicMove(
              e.nativeEvent.contentOffset.x,
              e.nativeEvent.velocity.x
            );
          }}
          keyExtractor={this.props.keyExtractor}
        />
      </View>
    );
  }
}

Paginator.defaultProps = {
  onPaginatorScroll: () => {
    console.log("something");
  }
};

export default Paginator;