Closing Swipeouts

Close exposed Swipeouts when swiping

Set dataSource state

In this example, rows is sample data source.

getInitialState: function() {
  //  datasource rerendered when change is made (used to set Swipeout to active)
  var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => true})

  return {
    dataSource: ds.cloneWithRows(rows)
  }
}

Add a function to update dataSource

_updateDataSource: function(data) {
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(data)
  })
},

Add a function to set an active Swipeout row

//  set active swipeout item
_handleSwipeout: function(sectionID, rowID) {
  for (var i = 0; i < rows.length; i++) {
    if (i != rowID) rows[i].active = false
    else rows[i].active = true
  }
  this._updateDataSource(rows)
},

Add onOpen and close to Swipeout

_renderRow: function (rowData: string, sectionID: number, rowID: number) {
  return <Swipeout
          rowID={rowID}
          close={!rowData.active}
          onOpen={(sectionID, rowID) => this._handleSwipeout(sectionID, rowID)}...>
            ...
        </Swipeout>
}

Render ListView

render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this._renderRow}.../>
    )
}