react-native-scroll-to-top
v1.1.0
Published
A React Native component to scroll back to top
Downloads
29
Readme
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'
orvar 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;