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;