Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/little-buddy/react-native-mr-pullrefresh
Mr.pullrefresh is a pure javascript pull-refresh library for react-native. Support iOS、Android、Web 🎸
https://github.com/little-buddy/react-native-mr-pullrefresh
android ios pullrefresh react react-native web
Last synced: 16 days ago
JSON representation
Mr.pullrefresh is a pure javascript pull-refresh library for react-native. Support iOS、Android、Web 🎸
- Host: GitHub
- URL: https://github.com/little-buddy/react-native-mr-pullrefresh
- Owner: little-buddy
- License: mit
- Created: 2023-09-03T11:49:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-13T19:56:30.000Z (about 1 year ago)
- Last Synced: 2024-09-01T01:50:05.564Z (2 months ago)
- Topics: android, ios, pullrefresh, react, react-native, web
- Language: TypeScript
- Homepage:
- Size: 26.3 MB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-mr-pullrefresh
![NPM](https://badgen.net/npm/v/react-native-mr-pullrefresh)
![NPM](https://badgen.net/npm/dw/react-native-mr-pullrefresh)
![MIT](https://badgen.net/static/license/MIT/red)
![INSTALLED](https://badgen.net/packagephobia/install/react-native-mr-pullrefresh)
![NODE](https://badgen.net/npm/node/react-native-mr-pullrefresh?color=purple)
![STARS](https://badgen.net/github/stars/little-buddy/react-native-mr-pullrefresh?color=gray)```
/\/\ _ __ / _ \_ _| | | /__\ ___ / _|_ __ ___ ___| |__
/ \| '__| / /_)/ | | | | |/ \/// _ \ |_| '__/ _ \/ __| '_ \
/ /\/\ \ | _ / ___/| |_| | | / _ \ __/ _| | | __/\__ \ | | |
\/ \/_| (_) \/ \__,_|_|_\/ \_/\___|_| |_| \___||___/_| |_|```
react-native pull refresh on iOS, Android and Web
## 💪🏻 Support
| Platform | | solved |
| -------- | ----------- | ----------- |
| iOS | ✅ | 🔥 Perfect |
| Android | ✅ | 😂 Bottom response is bad |
| Web | ✅ | 😭 Pulling and scrolling cant switch smoothly || Library | |
| -------- | ----------- |
| react-native-gesture-handler | 2.x |
| react-native-reanimated | 3.x |#### ⚠️ Warning
`react-native-mr-pullrefresh` Only support wrapper `Animated.ScrollView` and `Animated.FlatList`not support nested MrPullRefresh!
## Installation
It relies on `react-native-gesture-handler` and `react-native-reanimated`
so please install them before you use this package
```sh
yarn install react-native-gesture-hanlder react-native-reanimated
``````sh
yarn install react-native-mr-pullrefresh
```## Usage
```js
import { MrPullRefresh } from 'react-native-mr-pullrefresh';// ...
null}
/>{/* or*/}
{/* children */}
```
## Example
| | |
| :--------: | :-----------: |
| iOS | Android |## Props
| props | type | description | Default |
| ----------------- | --------- | ------------------------------------------------------------ | -------- |
| pulldownHeight | Number | The height of the drop-down load component is defined, and the judgment of the drop-down state depends on this value | 140 |
| pullupHeight | Number | The height of the pull-up component is defined, and the pull-up state is determined by this value | 100 |
| containerFactor | Number | The container factor is used to adjust the height of the refresh judgment | 0.5 |
| pullingFactor | Number | Determine the coefficient of pulling state length | 2.2 |
| enablePullup | Boolean | whether show pullingupLoading | false |
| pulldownLoading | Component | You can custom the Component | |
| pullupLoading | Component | You can custom the Component | |
| | | | |
| onPulldownRefresh | Function | callback of pulling down refresh, load data with it | ()=>void |
| onPullupRefresh | Function | callback of pulling up refresh, load data with it | ()=>void |## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)