react-native-mr-pullrefresh

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

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