# react-native-web-refresh-control

> An implementation of React Native's RefreshControl for web, since react-native-web currently does not provide one

Latest version **1.1.2** (published 2024-01-22) · MIT license · 278.7K weekly downloads

## Install

```sh
npm install react-native-web-refresh-control
pnpm add react-native-web-refresh-control
yarn add react-native-web-refresh-control
bun add react-native-web-refresh-control
```

## Health

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

Positive: moderate downloads; no vulnerabilities.

Warnings: no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2024-01-22 |
| First published | 2019-10-02 |
| Weekly downloads | 278.7K |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 831 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 65 |
| Author | Nuno Balbona |
| Maintainers | niciusb |
| Keywords | react-native, react-native-web, RefreshControl |

## Links

- npm: https://www.npmjs.com/package/react-native-web-refresh-control
- Repository: https://github.com/NiciusB/react-native-web-refresh-control
- Homepage: https://github.com/NiciusB/react-native-web-refresh-control#readme
- Issues: https://github.com/NiciusB/react-native-web-refresh-control/issues
- npm.io page: https://npm.io/package/react-native-web-refresh-control

## Recent versions

- 1.1.2 (latest) — 2024-01-22
- 1.1.1 — 2022-02-15
- 1.1.0 — 2021-08-24
- 1.0.3 — 2020-05-28
- 1.0.2 — 2020-05-10
- 1.0.1 — 2020-03-26
- 1.0.0 — 2019-10-02

## README

# react-native-web-refresh-control [![NPM Version](https://img.shields.io/npm/v/react-native-web-refresh-control.svg)](https://npmjs.com/package/react-native-web-refresh-control)

Drop-in RefreshControl component for web

<img src="./example.gif" width=800 />

## Installation and Configuration

```bash
npm i react-native-web-refresh-control
```

#### If you're using Expo
You can go ahead and use the package!

#### If you're NOT using Expo
You will need to configure webpack to parse JSX in `node_modules/react-native-web-refresh-control`.

1. Eject from `react-scripts` with `npm run eject`. Make sure to know what ejecting is before doing it.
2. Modify the main `babel-loader` module in `config/webpack.config.js`.
   * Replace `include: paths.appSrc,` with `include: [paths.appSrc, /node_modules\/react-native-web-refresh-control/],` 

## Usage

`react-native-web-refresh-control` exports two properties:

* `patchFlatListProps` is a function that you can call at some point, while your app is loading. It replaces the default value of the refreshControl prop of `FlatList`

* `RefreshControl` can be used to easily give `ScrollView` a pull-to-refresh functionality, just like the `RefreshControl` exported from react-native. However, if you used the `RefreshControl` from react-native, it would not work on the web. To see how to do this, check out this snack: https://snack.expo.io/@niciusb/refreshcontrol-example

## Example of RefreshControl

https://snack.expo.io/@niciusb/refreshcontrol-example

```
import { RefreshControl } from 'react-native-web-refresh-control'


<ScrollView
   refreshControl={
      <RefreshControl refreshing={refreshing} onRefresh={reloadLines} />
   }
>
   <Text>This scrollview will have pull-to-refresh functionality on the web</Text>
</ScrollView>
```

## Example of patchFlatListProps

```
// index.js
import { patchFlatListProps } from 'react-native-web-refresh-control'

import App from './App'

patchFlatListProps()
registerRootComponent(App)
```

## Customize flat list refresh control for web

* `patchFlatListProps` takes optional `options` to customize the refresh control:
* To customize refresh control for iOS and Android, please see [RefreshControl API](https://reactnative.dev/docs/refreshcontrol)

| option     | Type                | Description                                                                              | default                          |
|------------|---------------------|------------------------------------------------------------------------------------------|----------------------------------|
| colors     | array               | If tintColor is not defined, it uses the first color in the array for refresh indicator. |                                  |
| enabled    | boolean             | Whether the pull to refresh functionality is enabled.                                    | true                             |
| size       | RefreshControl.SIZE | Size of the refresh indicator.                                                           | RefreshLayoutConsts.SIZE.DEFAULT |
| tintColor  | color               | The color of the refresh indicator.                                                      |                                  |
| title      | string              | The title displayed under the refresh indicator.                                         |                                  |
| titleColor | color               | The color of the refresh indicator title.                                                |                                  |                 |                                  |

* Example
```
// index.js
import { patchFlatListProps } from 'react-native-web-refresh-control'

import App from './App'

// make refresh control red
patchFlatListProps({tintColor: 'red'})
registerRootComponent(App)
```

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