A React Native component to scroll back to top
npm install react-native-scroll-to-topnpm install react-native-scroll-to-top --save
import ScrollToTop from 'react-native-scroll-to-top'
var ScrollToTop = require('react-native-scroll-to-top')
false | true if your List is a ListView, false if your List is a FlatList.
null | Background color of the view
#ffffff | Color of the view
null | Icon button
Dimensions.get('window').width - 80 | Number of logical pixels to offset the left edge of this component.
Scroll to Top | If icon is null. This props will be displayed.
Dimensions.get('window').width - 170 | Number of logical pixels to offset the top edge of this component.
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 (
ref={(listview) => {
this.listview = listview;
}}
dataSource={this.state.dataSource}
renderRow={(rowData) => {rowData} }
/>
ListView
rootView={this.listview}
/>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#d9f9b1',
alignItems: 'center',
},
text: {
paddingVertical: 15,
alignSelf: 'center',
color: '#4f603c'
}
})
export default ScrollToTop;
``