How do I Call highlightRow of ListView.renderRow()?

Question

I can't seem to figure out how to use the highlightRow attribute ListView's renderRow.

The ListView.renderRow Documentation states...

(rowData, sectionID, rowID, highlightRow) => renderable

Takes a data entry from the data source and its ids and should return a renderable component to be rendered as the row. By default the data is exactly what was put into the data source, but it's also possible to provide custom extractors. ListView can be notified when a row is being highlighted by calling highlightRow function. The separators above and below will be hidden when a row is highlighted. The highlighted state of a row can be reset by calling highlightRow(null).

I'd like to call attention to the line...

ListView can be notified when a row is being highlighted by calling highlightRow function.

when I console.log(rowData, sectionID, rowID, highlightedRow), I can see that the highlightedRow is a function with the following signature...

function(sectionID,rowID){
  this.setState({highlightedRow:{sectionID:sectionID,rowID:rowID}});
}

which is called from here in the source code (see this.onRowHighlighted)...

<StaticRenderer
  key={'r_' + comboID}
  shouldUpdate={!!shouldUpdateRow}
  render={this.props.renderRow.bind(
    null,
    dataSource.getRowData(sectionIdx, rowIdx),
    sectionID,
    rowID,
    this.onRowHighlighted
  )}
/>;

Can anyone provide an example how to use highlightRow properly?

Answer 1

After investigating highlightedRow state property in ListView code, i've seen that it's only used to calculate adjacentRowHighlighted parameter that is passed to renderSeparator method.

(sectionID, rowID, adjacentRowHighlighted) => renderable

If provided, a renderable component to be rendered as the separator below each row but not the last row if there is a section header below. Take a sectionID and rowID of the row above and whether its adjacent row is highlighted.

So, i believe the only use case for highlightRow would be rendering a different separator for highlighted rows. Here is a simple example that changes separator background colour based on adjacentRowHighlighted argument.

<ListView
  renderRow={(rowData, sectionID, rowID, highlightRow) {
    return (
      <View>
        <TouchableOpacity
          onPress={() => highlightRow(sectionID, rowID)
        >
          {row content here}
        </TouchableOpacity>
      </View>
    );
  }}
  renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => {
    return (
      <View
        key={`${sectionID}-${rowID}`}
        style={{
          height: 1,
          backgroundColor: adjacentRowHighlighted ? 'blue' : 'red',
        }} 
      />
    );
  }}
/>