react-native-scrolltotop

https://github.com/yzsolo/react-native-scrolltotop

a RN component make list come back to top.

IOS && ANDROID

 －－－ 

Installation

npm install --save react-native-scrolltotop

Usage example

see the example/example.js for a more detailed example.

import ScrollTopView from 'react-native-scrolltotop'; //first set default state in your constructor constructor(props) { //... this.state = { isShowToTop: false, }; } //then bind a method to detect the scroll distance of your listView //set ref with 'listview' <ListView ref="listview" onScroll={(e)=>this._onScroll(e)} style={styles.listView} renderScrollComponent={(props)=>{ return <ScrollView style={styles.ViewPort} {...props}/> }}/> //here is the _onScrol method _onScroll(e) { var offsetY = e.nativeEvent.contentOffset.y; if(offsetY > 100) { this.setState({ isShowToTop: true }) } else { this.setState({ isShowToTop: false }) } } //use it with your listView together <View style={{flex:1}}> <View style={styles.header}> <Text style={styles.headerText}>消息列表</Text> </View> {listView} {this.state.isShowToTop?<ScrollTopView root={this} ></ScrollTopView>:null} </View>