How to get the highlight effect with viewing the list in the response native?

Question

I am trying to get the marquee effect in responding to my own kind of list. I am trying to implement this way.

<ListView horizontal={true} ref={ref => this.infoListView = ref} showsHorizontalScrollIndicator={false} automaticallyAdjustContentInsets={false} onContentSizeChange={(contentWidth,contentHeight)=>{ this.moveListToEnd() }} onEndReached={()=>this.moveListToTop()} enableEmptySections={true} style={styles.infolist} dataSource={this.state.dataSource} renderRow={(rowData,sectionID,rowID) => < Row data={rowData} rowID = {rowID}/>} /> moveListToEnd(){ this.infoListView.scrollToEnd({animated: true}); } moveListToTop(){ this.infoListView.scrollTo({x: 0, y: 0, animated: true}) this.moveListToEnd(); } 

Answer 1

I figured out how to do this. Install the NPM timer mix first. And use this code.

 var moveListTimer = require('react-timer-mixin'); const ds = ''; var timerInterval = 10; var moveListTimerId; var pos = 0; var ListArr = []; class MarqueeListClass extends Component{ constructor(props){ super(props); ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(ListArr), listLength:ListArr.length, listmovingdirection:'right', }; } componentDidMount() { moveListTimerId = moveListTimer.setInterval( () => { this.moveList(); }, timerInterval); } componentWillUnmount() { moveListTimerId && clearInterval(moveListTimerId); } moveList(){ if(this.state.listmovingdirection==='right'){ this.moveListToRight(); } else if(this.state.listmovingdirection ==='left'){ this.moveListToLeft(); } } moveListToEnd(){ this.ListView.scrollToEnd({animated: true}); } moveListToRight(){ pos = pos + 0.5; this.ListView.scrollTo({x: pos, y: 0, animated: true}) } moveListToLeft(){ if(pos>0){ pos = pos - 0.5; this.ListView.scrollTo({x: pos, y: 0, animated: true}) } else{ this.setState({listmovingdirection:'right'}); } } onListReachEnd(){ this.setState({listmovingdirection:'left'}); } render(){ return( <View style = {styles.main}> <ListView horizontal={true} ref={ref => this.ListView = ref} showsHorizontalScrollIndicator={false} automaticallyAdjustContentInsets={false} onEndReached={()=>this.onListReachEnd()} enableEmptySections={true} style={styles.list} dataSource={this.state.dataSource} renderRow={(rowData,sectionID,rowID) => < Row info={rowData} rowID = {rowID}/>} /> </View> ); } }