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
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 [
{
this.listview = listview;
}}
dataSource={this.state.dataSource}
renderRow={[rowData] => {rowData}}
/>
];
}
}
const styles = StyleSheet.create[{
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#d9f9b1',
alignItems: 'center',
},
text: {
paddingVertical: 15,
alignSelf: 'center',
color: '#4f603c'
}
}]
export default ScrollToTop;