# react-native-scroll-to-top

> A React Native component to scroll back to top

Latest version **1.1.0** (published 2017-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-scroll-to-top
pnpm add react-native-scroll-to-top
yarn add react-native-scroll-to-top
bun add react-native-scroll-to-top
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-07-12 |
| First published | 2017-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Wesly Laboy |
| Maintainers | wesly-lc |
| Keywords | react-native, scrolltotop |

## Links

- npm: https://www.npmjs.com/package/react-native-scroll-to-top
- Repository: https://github.com/weslylaboy/react-native-scroll-to-top
- Homepage: https://github.com/weslylaboy/react-native-scroll-to-top#readme
- Issues: https://github.com/weslylaboy/react-native-scroll-to-top/issues
- npm.io page: https://npm.io/package/react-native-scroll-to-top

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Recent versions

- 1.1.0 (latest) — 2017-07-12
- 1.0.3 — 2017-07-03
- 1.0.2 — 2017-07-03
- 1.0.1 — 2017-07-03
- 1.0.0 — 2017-07-03

## README

# react-native-scroll-to-top
A React Native component to scroll back to top

![preview](/docs/scrollToTop.gif)

## 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;

```

---
_Source: https://npm.io/package/react-native-scroll-to-top · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._