{"id":13802789,"url":"https://github.com/jsdf/react-native-refreshable-listview","last_synced_at":"2025-05-15T20:02:06.976Z","repository":{"id":29652265,"uuid":"33193963","full_name":"jsdf/react-native-refreshable-listview","owner":"jsdf","description":"Deprecated. A pull-to-refresh ListView which shows a loading spinner while your data reloads","archived":false,"fork":false,"pushed_at":"2017-03-18T07:58:25.000Z","size":296,"stargazers_count":1381,"open_issues_count":37,"forks_count":168,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-04-02T02:55:50.350Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsdf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-31T15:42:15.000Z","updated_at":"2025-03-23T01:25:00.000Z","dependencies_parsed_at":"2022-09-16T13:02:47.113Z","dependency_job_id":null,"html_url":"https://github.com/jsdf/react-native-refreshable-listview","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-native-refreshable-listview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-native-refreshable-listview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-native-refreshable-listview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-native-refreshable-listview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdf","download_url":"https://codeload.github.com/jsdf/react-native-refreshable-listview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767232,"owners_count":20992538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T00:01:56.665Z","updated_at":"2025-04-08T02:42:59.847Z","avatar_url":"https://github.com/jsdf.png","language":"JavaScript","readme":"# React Native RefreshableListView\nA pull-to-refresh ListView which shows a loading spinner while your data reloads\n\n*Deprecated*: now you can use the built-in [RefreshControl](https://facebook.github.io/react-native/docs/refreshcontrol.html) instead.\n\n![Build Status](https://api.travis-ci.org/jsdf/react-native-refreshable-listview.svg)\n\nIn action (from [ReactNativeHackerNews](https://github.com/jsdf/ReactNativeHackerNews)):\n\n![React Native Hacker News](http://i.imgur.com/gVmrxDe.png)\n\n## Usage\n\n**Note:** these are the docs for the 2.x branch, currently in beta. If you are looking for the docs for a 1.x version, see the [1.x branch](https://github.com/jsdf/react-native-refreshable-listview/tree/1.x).\n\nYou can install the latest beta with `npm install react-native-refreshable-listview@next`\n\n### RefreshableListView\nReplace a ListView with a RefreshableListView to add pulldown-to-refresh \nfunctionality. Accepts the same props as ListView, plus a few extras (see the **props** definitions below).\n\n```js\nvar React = require('react-native')\nvar {Text, View, ListView} = React\nvar RefreshableListView = require('react-native-refreshable-listview')\n\nvar ArticleStore = require('../stores/ArticleStore')\nvar StoreWatchMixin = require('./StoreWatchMixin')\nvar ArticleView = require('./ArticleView')\n\nvar ds = new ListView.DataSource({rowHasChanged: (r1, r2) =\u003e r1 !== r2}) // assumes immutable objects\n\nvar ArticlesScreen = React.createClass({\n  mixins: [StoreWatchMixin],\n  getInitialState() {\n    return {dataSource: ds.cloneWithRows(ArticleStore.all())}\n  },\n  getStoreWatches() {\n    this.watchStore(ArticleStore, () =\u003e {\n      this.setState({dataSource: ds.cloneWithRows(ArticleStore.all())})\n    })\n  },\n  reloadArticles() {\n    // returns a Promise of reload completion\n    // for a Promise-free version see ControlledRefreshableListView below\n    return ArticleStore.reload()\n  },\n  renderArticle(article) {\n    return \u003cArticleView article={article} /\u003e\n  },\n  render() {\n    return (\n      \u003cRefreshableListView\n        dataSource={this.state.dataSource}\n        renderRow={this.renderArticle}\n        loadData={this.reloadArticles}\n        refreshDescription=\"Refreshing articles\"\n      /\u003e\n    )\n  }\n})\n```\n\n#### Props\n\n- `loadData: func.isRequired`\n  A function returning a Promise or taking a callback, invoked upon pulldown. \n  The refreshing indicator (spinner) will show until the Promise resolves or the callback \n  is called.\n- `refreshDescription: oneOfType([string, element])`\n  Text/element to show alongside spinner. If a custom \n  `refreshingIndicatorComponent` is used this value will be passed as its \n  `description` prop.\n- `refreshingIndicatorComponent: oneOfType([func, element])`\n  Content to show in list header when refreshing. Can be a component class or \n  instantiated element. Defaults to `RefreshableListView.RefreshingIndicator`.\n  You can easily customise the appearance of the indicator by passing in a\n  customised `\u003cRefreshableListView.RefreshingIndicator /\u003e`, or provide your own\n  entirely custom content to be displayed.\n- `minDisplayTime: number`\n  Minimum time the spinner will show for.\n- `minBetweenTime: number`\n  Minimum time after a refresh before another refresh can be performed.\n- `minPulldownDistance: number`\n  Minimum distance (in px) which the list has to be scrolled off the top to \n  trigger a refresh.\n- `ignoreInertialScroll: bool`\n  Require the user to be actually touching the screen when the pulldown distance \n  exceeds `minPulldownDistance` to trigger a refresh (eg. not just inertially \n  scrolling off the top). Defaults to `true`.\n- `onScroll: func`\n  An event handler for the `onScroll` event which will be chained after the one\n  defined by the `RefreshableListView`.\n- `scrollEventThrottle: number`\n  How often `ListView` produces scroll events, in ms. Defaults to a fairly low \n  value, try setting it higher if you encounter performance issues. Keep in mind\n  that a higher value will make the pulldown-to-refresh behaviour less responsive.\n- `colors: array of strings`\n  Colors to be used for pull to refresh indicator in Android\n- `progressBackgroundColor: string`\n  Color to be used for pull to refresh indicator background in Android\n\n\n### ControlledRefreshableListView\nLow level component used by `RefreshableListView`. Use this directly if you want \nto manually control the refreshing status (rather than using a Promise).\n\nThis component is more suitable for use in a [Redux](https://github.com/rackt/redux)-style connected component.\n\n```js\nvar React = require('react-native')\nvar {Text, View, ListView} = React\nvar {ControlledRefreshableListView} = require('react-native-refreshable-listview')\n\nvar ArticleView = require('./ArticleView')\n\nvar ds = new ListView.DataSource({rowHasChanged: (r1, r2) =\u003e r1 !== r2}) // assumes immutable objects\n\nvar ArticlesScreen = React.createClass({\n  propTypes: {\n    // eg. props mapped from store state\n    articles: React.PropTypes.array.isRequired,\n    isRefreshingArticles: React.PropTypes.bool.isRequired,\n    // eg. a bound action creator\n    refreshArticles: React.PropTypes.func.isRequired,\n  },\n  getInitialState() {\n    return {dataSource: ds.cloneWithRows(this.props.articles)}\n  },\n  componentWillReceiveProps(nextProps) {\n    if (this.props.articles !== nextProps.articles) {\n      this.setState({dataSource: ds.cloneWithRows(nextProps.articles)})\n    }\n  },\n  renderArticle(article) {\n    return \u003cArticleView article={article} /\u003e\n  },\n  render() {\n    return (\n      \u003cControlledRefreshableListView\n        dataSource={this.state.dataSource}\n        renderRow={this.renderArticle}\n        isRefreshing={this.props.isRefreshingArticles}\n        onRefresh={this.props.refreshArticles}\n        refreshDescription=\"Refreshing articles\"\n      /\u003e\n    )\n  }\n})\n```\n\n#### Props\n- `onRefresh: func.isRequired`\n  Called when user pulls listview down to refresh.\n- `isRefreshing: bool.isRequired`\n  Whether or not to show the refreshing indicator.\n- `refreshDescription: oneOfType([string, element])`\n  *See `RefreshableListView`*\n- `refreshingIndicatorComponent: oneOfType([func, element])`\n  *See `RefreshableListView`*\n- `minPulldownDistance: number`\n  *See `RefreshableListView`*\n- `ignoreInertialScroll: bool`\n  *See `RefreshableListView`*\n- `onScroll: func`\n  *See `RefreshableListView`*\n- `scrollEventThrottle: number`\n  *See `RefreshableListView`*\n\n### RefreshableListView.RefreshingIndicator\nComponent with activity indicator to be displayed in list header when refreshing.\n(also exposed as `ControlledRefreshableListView.RefreshingIndicator`)\n\n#### Props\n\n- `description: oneOfType([string, element])`\n  Text/element to show alongside spinner.\n- `stylesheet: object`\n  A stylesheet object which overrides one or more of the styles defined in the \n  [RefreshingIndicator stylesheet](lib/RefreshingIndicator.js).\n- `activityIndicatorComponent: oneOfType([func, element])`\n  The spinner to display. Defaults to `\u003cActivityIndicatorIOS /\u003e`.\n\n### RefreshableListView.DataSource, ControlledRefreshableListView.DataSource\nAliases of `ListView.DataSource`, for convenience.\n\n## Howto\n\n### Customise the refresh indicator (spinner)\n\nYour first option is to style the default RefreshingIndicator:\n\n```js\nvar indicatorStylesheet = StyleSheet.create({\n  wrapper: {\n    backgroundColor: 'red',\n    height: 60,\n    marginTop: 10,\n  },\n  content: {\n    backgroundColor: 'blue',\n    marginTop: 10,\n    height: 60,\n  },\n})\n\n\u003cRefreshableListView\n  refreshingIndicatorComponent={\n    \u003cRefreshableListView.RefreshingIndicator stylesheet={indicatorStylesheet} /\u003e\n  }\n/\u003e\n```\n\nAlternatively, you can provide a custom RefreshingIndicator:\n\n```js\nvar MyRefreshingIndicator = React.createClass({\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cMySpinner /\u003e\n        \u003cText\u003e{this.props.description}\u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  },\n})\n\n\u003cRefreshableListView refreshingIndicatorComponent={MyRefreshingIndicator} /\u003e\n// or\n\u003cRefreshableListView refreshingIndicatorComponent={\u003cMyRefreshingIndicator /\u003e} /\u003e\n```\n\n## Changelog\n\n- **2.0.0-beta4**\n  - added Android support! (@maraujop)\n\n- **2.0.0-beta3**\n  - fixed proptype warnings from internal component\n  - adjusted default styling of refreshing indicator\n\n- **2.0.0-beta2**\n  - pulling down now reveals refreshing indicator behind current view, rather\n  than the refreshing indicator moving down from the top of the screen\n  - `renderHeaderWrapper` is no longer used \n  - fixed infinite refreshing when pulled down\n\n- **1.2.0**\n  - deprecated `renderHeader` in favour of `renderHeaderWrapper` as some \n  developers seemed to be confused by the fact that a `renderHeader` handler \n  for a standard `ListView` will not automatically *just work* with this component,\n  but rather needs to be modified as described in the documentation. The new prop\n  `renderHeaderWrapper` works identically to the previous one, however hopefully\n  now it is named differently it will be more apparent that its behaviour is not\n  the same as with `ListView`. The `renderHeader` prop will be removed in 2.0.\n- **1.1.0**\n  - added behaviour to ignore inertial scrolling (@dhrrgn)\n  - exposed props: ignoreInertialScroll, scrollEventThrottle\n- **1.0.0**\n  - Split RefreshableListView into 3 parts: \n    - RefreshableListView handles 'refreshing' state by invoking 'loadData' \n      callback and waiting for resolution.\n    - ControlledRefreshableListView handles rendering of ListView header, \n      depending on isRefreshing prop. Calls onRefresh handler when \n      pulldown-to-refresh scroll motion occurs.\n    - RefreshingIndicator is the component rendered in the header of the \n      ListView when refreshing. Pass in a customised version of this (or a \n      completely different component) to RefreshableListView or \n      ControlledRefreshableListView if you want to customise refresh indicator \n      appearance.\n  - Added Jest unit tests\n- **0.3.0** added minPulldownTime \u0026 minBetweenTime props, fixed bug where \n  refresh could happen twice\n- **0.2.0** added support for ListView props setNativeProps and \n  getScrollResponder (@almost \u0026 @sscotth)\n","funding_links":[],"categories":["组件","JavaScript"],"sub_categories":["ListView\u0026ScrollView"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Freact-native-refreshable-listview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdf%2Freact-native-refreshable-listview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Freact-native-refreshable-listview/lists"}