Cacher is the code snippet organizer for pro developers

state={
        endsOfArray:{first:0,last:4,},
        numberOfVisableItems:4,
        array:[{"id":0,"opacity":1,"name":"Jobe Holly"},{"id":1,"opacity":1,"name":"Bernie Sanders"},{"id":2,"opacity":1,"name":"Al Frankin"},{"id":3,"opacity":1,"name":"Elizabeth Warren"},{"id":4,"opacity":1,"name":"Cory Booker"},{"id":5,"opacity":1,"name":"Sanders"},{"id":6,"opacity":1,"name":"Al"},{"id":7,"opacity":1,"name":"Elizabeth"},{"id":8,"opacity":1,"name":"Booker"}],
}

_onChangeVisibleRows(visibleRows, changedRows) {
let visableItems=_.map(visibleRows.s1, function(active, id) {return { id: id, active: active };})
// console.warn(" visableItems.length: ",visableItems.length);
this.setState({endsOfArray:{
  // first:visableItems[visableItems.length-1].id,
  // last:visableItems[0].id
  first:visableItems[visableItems.length-2].id,
  last:visableItems[1].id
}})
// const first=visableItems[visableItems.length-1].id
// const last=visableItems[0].id
  const {array}=this.state
  const {first,last}=this.state.endsOfArray
array.map((o) => {
  if( last < o.id && o.id < first){if(this._refs[o.id])this._refs[o.id].transitionTo({opacity: 1})}
  else{if(this._refs[o.id])this._refs[o.id].transitionTo({opacity: 0})}
})


}
renderRow(o,i) {return <Animatable.View style={{width:width/4,height:width/4,borderRadius:(width/4)/2, opacity: 1,}} ref={_ref=>{this._refs[o.id]=_ref}} key={`item${o.id}`}><TouchableOpacity onPress={o=>console.warn(o.id)}  style={{height:150,backgroundColor:"red", justifyContent:"center",alignItems:"center"}} key={`sectionlist-item-${i}`}><Text style={{color:'rgba(0,0,0,0.5)',fontSize: 20,textAlign: "center",margin: 10,}}>{o.name}</Text></TouchableOpacity></Animatable.View>}


      <ListView style={{flex: 1,width,height}}
            onChangeVisibleRows={this._onChangeVisibleRows.bind(this)}
            //renderScrollComponent={this._renderScrollComponent}
            //scrollRenderAheadDistance={this._scrollRenderAheadDistance}
            //dataSource={ds.cloneWithRows(this.state.array)} renderRow={(o,i)=><Animatable.View style={{opacity: 1,}} ref={`item${o.id}`}><TouchableOpacity onPress={o=>console.warn(o.id)}  style={{height:150,backgroundColor:"red", justifyContent:"center",alignItems:"center"}} key={`sectionlist-item-${i}`}><Text style={{color:'rgba(0,0,0,0.5)',fontSize: 20,textAlign: "center",margin: 10,}}>{o.name}</Text></TouchableOpacity></Animatable.View>}/>
            dataSource={ds.cloneWithRows(this.state.array)} renderRow={this.renderRow.bind(this)}/>