react-native-scrolltotop-perfect v0.0.3

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,
      refData:['listview'],
    };
  }
  
  //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 refData={this.state.refData} root={this} ></ScrollTopView>:null}
  </View>

Props

use Text

use Image

if it is useful to you, let me know :smile:.