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