How to get the marquee effect with list view in react native?

Question

I am trying to get the marquee effect in react native list view.I am trying to implement in 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 have found out the way to do it. Install NPM react-timer-mixin 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>
  );
}
}