Skip to content

Latest commit

 

History

History
112 lines (80 loc) · 3.85 KB

README.md

File metadata and controls

112 lines (80 loc) · 3.85 KB
Raw

react-native-mr-pullrefresh

NPM NPM MIT INSTALLED NODE STARS


  /\/\  _ __        / _ \_   _| | | /__\ ___ / _|_ __ ___  ___| |__
 /    \| '__|      / /_)/ | | | | |/ \/// _ \ |_| '__/ _ \/ __| '_ \
/ /\/\ \ |     _  / ___/| |_| | | / _  \  __/  _| | |  __/\__ \ | | |
\/    \/_|    (_) \/     \__,_|_|_\/ \_/\___|_| |_|  \___||___/_| |_|

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

yarn install react-native-gesture-hanlder react-native-reanimated
yarn install react-native-mr-pullrefresh

Usage

import { MrPullRefresh } from 'react-native-mr-pullrefresh';

// ...

 <MrPullRefresh
  onPulldownRefresh={downLoader}
  onPullupRefresh={upLoader}
  pulldownHeight={80}
  pullupHeight={100}
  enablePullup
>

  <Animated.FlatList
    data={[]}
    renderItem={() => null}
  />

 {/* or*/}

  <Animated.ScrollView>
    {/* children */}
  </Animated.ScrollView>
</MrPullRefresh>

Example

ios-example ios-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 to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library