{"id":26266101,"url":"https://github.com/react-native-studio/react-native-giftedlist","last_synced_at":"2025-04-30T16:46:34.690Z","repository":{"id":57337241,"uuid":"123548105","full_name":"react-native-studio/react-native-GiftedList","owner":"react-native-studio","description":"✌️ ListView or FlatList with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps","archived":false,"fork":false,"pushed_at":"2018-03-03T02:29:23.000Z","size":56,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-19T03:37:02.767Z","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/react-native-studio.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":"2018-03-02T07:51:57.000Z","updated_at":"2019-06-15T05:48:40.000Z","dependencies_parsed_at":"2022-09-10T03:53:34.244Z","dependency_job_id":null,"html_url":"https://github.com/react-native-studio/react-native-GiftedList","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-studio%2Freact-native-GiftedList","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-studio%2Freact-native-GiftedList/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-studio%2Freact-native-GiftedList/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-studio%2Freact-native-GiftedList/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-studio","download_url":"https://codeload.github.com/react-native-studio/react-native-GiftedList/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251747770,"owners_count":21637404,"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":"2025-03-14T03:16:50.539Z","updated_at":"2025-04-30T16:46:34.668Z","avatar_url":"https://github.com/react-native-studio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-GiftedList [![npm version](https://badge.fury.io/js/react-native-giftedlist.svg)](https://badge.fury.io/js/react-native-giftedlist)\n\nA ListView or FlatList  with pull-to-refresh, infinite scrolling and more for Android and iOS React-Native apps\n\n\n\n![](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-listview/master/Captures/ios_refresh_page_demo.gif)\n![](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-listview/master/Captures/android_refresh_page_demo.gif)\n\n\n## 安装\n\n`npm install react-native-giftedlist --save` or `yarn add react-native-giftedlist`\n\n\n## 使用\n\n\n### Simple example\n\n\n```js\nvar React = require('react-native');\nvar {\n  StyleSheet,\n  Text,\n  View,\n  TouchableHighlight,\n  ListView,\n  FlatList,\n} = React;\nvar createGiftedList = require('react-native-giftedlist');\nconst GiftedListView=createGiftedList(ListView);\n//也可以使用 createGiftedList(FlatList)\nvar Example = React.createClass({\n\n  /**\n   * Will be called when refreshing\n   * Should be replaced by your own logic\n   * @param {number} page Requested page to fetch\n   * @param {function} callback Should pass the rows\n   * @param {object} options Inform if first load\n   */\n  _onFetch(page = 1, callback, options) {\n    setTimeout(() =\u003e {\n      var rows = ['row '+((page - 1) * 3 + 1), 'row '+((page - 1) * 3 + 2), 'row '+((page - 1) * 3 + 3)];\n      if (page === 3) {\n        callback(rows, {\n          allLoaded: true, // the end of the list is reached\n        });\n      } else {\n        callback(rows);\n      }\n    }, 1000); // simulating network fetching\n  },\n\n\n  /**\n   * When a row is touched\n   * @param {object} rowData Row data\n   */\n  _onPress(rowData) {\n    console.log(rowData+' pressed');\n  },\n\n  /**\n   * Render a row\n   * @param {object} rowData Row data\n   */\n  _renderRowView(rowData) {\n    return (\n      \u003cTouchableHighlight\n        style={styles.row}\n        underlayColor='#c8c7cc'\n        onPress={() =\u003e this._onPress(rowData)}\n      \u003e\n        \u003cText\u003e{rowData}\u003c/Text\u003e\n      \u003c/TouchableHighlight\u003e\n    );\n  },\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cView style={styles.navBar} /\u003e\n        \u003cGiftedListView\n          rowView={this._renderRowView}\n          onFetch={this._onFetch}\n          firstLoader={true} // display a loader for the first fetching\n          pagination={true} // enable infinite scrolling using touch to load more\n          refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android\n          withSections={false} // enable sections\n          customStyles={{\n            paginationView: {\n              backgroundColor: '#eee',\n            },\n          }}\n\n          refreshableTintColor=\"blue\"\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n});\n\nvar styles = {\n  container: {\n    flex: 1,\n    backgroundColor: '#FFF',\n  },\n  navBar: {\n    height: 64,\n    backgroundColor: '#CCC'\n  },\n  row: {\n    padding: 10,\n    height: 44,\n  },\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-studio%2Freact-native-giftedlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-studio%2Freact-native-giftedlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-studio%2Freact-native-giftedlist/lists"}