FlatList support

[vTrip]

Will this move to FlatList instead of ListView ??

FlatList has a handy feature scrollToItem that I would like to use with this library.

[chetstone]

As always, PR Is welcome.

[Shinichi52]

I like this repository, it's awesome. I hope you will support FlatList :)

[mrbrdo]

Would be nice to see this since newer versions of React Native don't support ListView anymore.

[nihgwu]

@mrbrdo ListView is depreciated not removed, I haven't switched to FlatList because there are still some minor issues with it

[vTrip]

@nihgwu i'd love to hear about the issues you have found with FlatList. May help me with future tasks

[vTrip]

Will be uploading my FlatList version of this library to a repo soon. It is a WIP. Would love some assistance with finishing it off. For anyone interested I will post a link here when it is up.

[vTrip]

Hey everyone. I've uploaded to a repo. My version is a WIP.

I need help finishing off functionality. Specifically around the animation for empty row that appears between rows when you are dragging around.

https://github.com/vTrip/FlatListSortable

[gazickil]

@vTrip the scrollToItem can be easly done using current code.

you can use internal layoutMap which contains array of all rows layouts (xPos, yPox, height, width)

Example function:

scrollToIndex = (index, animated) => {
    const y = this._list.layoutMap[index.toString()].y
    this._list.scrollTo({ x: 0, y: y , animated: true });
};

I use it to scroll when adding new element or on load. I'm using setTimeout as i'm waiting for redux to update the store and for list to catch up with the data update.

  componentDidMount() {
    setTimeout(() => {
      this.scrollToIndex(this.props.selectedConfigIdx, false);
    }, 300);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.selectedConfigIdx !== this.props.selectedConfigIdx && this._areWeDuringAddNewConfig) {
      setTimeout(() => {
        this.scrollToIndex(this.props.selectedConfigIdx, true);
      }, 100);
    }
  }

  _addNewConfig = () => {
    if (this._areWeDuringAddNewConfig) {
      return;
    }

    this._areWeDuringAddNewConfig = true;
    this.props.onConfigAdd();
  };

  scrollToIndex = (index, animated) => {
    const y = this._list.layoutMap[index.toString()].y;
    this._areWeDuringAddNewConfig = false;
    this._list.scrollTo({ x: 0, y: y, animated: animated });
  };