You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-native-web-refresh-control

Package Overview
Dependencies
2
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-web-refresh-control

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


Version published
Maintainers
1
Created

Readme

Source

react-native-web-refresh-control NPM Version

Drop-in RefreshControl component for web

Installation and Configuration

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
optionTypeDescriptiondefault
colorsarrayIf tintColor is not defined, it uses the first color in the array for refresh indicator.
enabledbooleanWhether the pull to refresh functionality is enabled.true
sizeRefreshControl.SIZESize of the refresh indicator.RefreshLayoutConsts.SIZE.DEFAULT
tintColorcolorThe color of the refresh indicator.
titlestringThe title displayed under the refresh indicator.
titleColorcolorThe 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)

Keywords

FAQs

Package last updated on 22 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc