react native animate listview rows while scrolling

home.js

import React, { Component } from 'react';
import {
 StyleSheet,
 View,
 Text,
 ListView
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';
import * as Animatable from 'react-native-animatable';


class Home extends Component {

  rows = [];

  constructor(props){
  	super(props)

    this._renderRow = this._renderRow.bind(this);
    this._animateRows = this._animateRows.bind(this);

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

  	this.state={
      dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 3', 'row 4', 'row 1', 'row 2', 'row 3', 'row 4']),
  	}
  }

 render() {
   return(
     <ListView
       pagingEnabled={true}
       style={{flex: 1, marginTop: 64, backgroundColor: 'blue'}}
       dataSource={this.state.dataSource}
       renderRow={this._renderRow}
       onChangeVisibleRows={this._animateRows}
    />
    );
  }

  _animateRows(visibleRows, changedRows){
    for(var k in visibleRows.s1){
      if(visibleRows.s1[k]){
        console.log("row animated: ", k);
        this.rows[k].rubberBand(1100);
      }
    }
  }

  _renderRow(rowData, sectionID, rowID, highlightRow){
    return(
      <View style={{flexDirection: 'row', height: 200, backgroundColor: 'red', alignSelf: 'stretch', marginVertical: 5, padding: 5, alignItems: 'center', justifyContent: 'space-around'}}>
        <Animatable.Text ref={(row) => this.rows[rowID] = row}><Icon name="mobile" size={100} color="white" /></Animatable.Text>
         <Text style={{color: 'white', fontSize: 30, fontWeight: 'bold', textAlign: 'center'}}>
          {rowData}
         </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

})

export default Home;

demo

nice idea - could u please upgrade to rn39?