react-native-scroll-to-top v1.1.0

react-native-scroll-to-top

A React Native component to scroll back to top

Installation

• npm install react-native-scroll-to-top --save

• import ScrollToTop from 'react-native-scroll-to-top' or var ScrollToTop = require('react-native-scroll-to-top')

  Available Props

  Property	Type	Default	Description
  rootView	object		This prop is required. You must pass a ref of the root view. This will be used to scroll to the top.
  ListView	bool	false	true if your List is a ListView, false if your List is a FlatList.
  backgroundColor	string	null	Background color of the view
  borderRadius	number	30	Border radius for the view
  color	string	#ffffff	Color of the view
  fontSize	number	12	Font size of Text element
  icon	element	null	Icon button
  isRadius	bool	true	If the view is a round view
  left	number	Dimensions.get('window').width - 80	Number of logical pixels to offset the left edge of this component.
  text	string	Scroll to Top	If icon is null. This props will be displayed.
  top	number	Dimensions.get('window').width - 170	Number of logical pixels to offset the top edge of this component.
  width	number	60	Width of the view

Example

import React, { Component } from 'react';
import { AppRegistry, ListView, StyleSheet, Text, View, TouchableOpacity  } from 'react-native';
import ScrollToTop from 'react-native-scroll-to-top'

class ScrollToTop extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 'row 1', 'row 2', 
      'row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2','row 1', 'row 2'
      ]),
    };
  }

  render() {
    return (
      <View>
      <ListView
        ref={(listview) => {
            this.listview = listview;
          }}
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text style={styles.text}>{rowData}</Text>}
      />
      <ScrollToTop
          ListView
          rootView={this.listview}
      />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
      padding: 10,
      marginTop: 3,
      backgroundColor: '#d9f9b1',
      alignItems: 'center',
   },
   text: {
     paddingVertical: 15,
     alignSelf: 'center',
     color: '#4f603c'
   }
})

export default ScrollToTop;