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();
}
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>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With