├── .babelrc ├── .travis.yml ├── .gitignore ├── .editorconfig ├── .eslintrc ├── CHANGELOG.md ├── LICENSE ├── src └── index.js ├── package.json └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react-native" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "5" 4 | script: 5 | - "npm run build" 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | logs 3 | *.log 4 | node_modules 5 | dist 6 | tmp 7 | coverage 8 | npm-debug.log 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [*.md] 11 | trim_trailing_whitespace = false 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb", 4 | "env": { 5 | "node": true 6 | }, 7 | "rules": { 8 | "no-use-before-define": 0, 9 | }, 10 | "settings": { 11 | "import/resolver": { 12 | "node": { 13 | "extensions": ['.js', '.android.js', '.ios.js'] 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Changelog 4 | 5 | - [v1.0.0](#v100) 6 | 7 | 8 | 9 | ### v1.0.0 10 | 11 | * react-native-scrollable-list initial commit. 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This software is released under the MIT license: 2 | 3 | Copyright (c) 2016 ignacioalvarez92@gmail.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.)) 21 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { ListView, RefreshControl } from 'react-native'; 3 | 4 | const { array, func } = PropTypes; 5 | 6 | class ScrollableList extends Component { 7 | static propTypes = { 8 | data: array.isRequired, 9 | renderRow: func.isRequired, 10 | }; 11 | 12 | constructor(props) { 13 | super(props); 14 | 15 | const { data, onRefresh, ...other } = props; 16 | this.otherProps = other; 17 | this.onRefresh = onRefresh; 18 | 19 | this.refreshEvent = this.refreshEvent.bind(this); 20 | 21 | this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 22 | this.state = { 23 | dataSource: this.ds.cloneWithRows(data), 24 | refreshing: false, 25 | }; 26 | } 27 | 28 | componentWillReceiveProps(props) { 29 | if (this.props.data !== props.data) { 30 | this.setState({ 31 | dataSource: this.ds.cloneWithRows(props.data || []), 32 | }); 33 | } 34 | } 35 | 36 | refreshEvent() { 37 | this.setState({ refreshing: true }); 38 | 39 | if (typeof this.onRefresh() === 'object' && 40 | typeof this.onRefresh().then === 'function') { 41 | this.onRefresh().then(this.setState({ refreshing: false })); 42 | } else { 43 | this.onRefresh(); 44 | this.setState({ refreshing: false }); 45 | } 46 | } 47 | 48 | renderRefreshControl() { 49 | return ( 50 | ); 54 | } 55 | 56 | render() { 57 | return ( 58 | 63 | ); 64 | } 65 | } 66 | 67 | export default ScrollableList; 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-scrollable-list", 3 | "version": "2.1.0", 4 | "description": "A ListView without the boilerplate.", 5 | "main": "dist/index.js", 6 | "files": [ 7 | "bin/", 8 | "dist/" 9 | ], 10 | "scripts": { 11 | "clean": "rimraf dist", 12 | "lint": "eslint src", 13 | "check": "npm run lint -s && dependency-check package.json --entry src", 14 | "prebuild": "npm run check -s && npm run clean", 15 | "build": "babel --optional runtime src -d dist", 16 | "prepublish": "npm run build -s", 17 | "deploy": "git pull --rebase origin master && git push origin master", 18 | "patch": "npm version patch && npm publish", 19 | "minor": "npm version minor && npm publish", 20 | "major": "npm version major && npm publish", 21 | "postpublish": "git push origin master --follow-tags" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/nachoaIvarez/react-native-scrollable-list.git" 26 | }, 27 | "keywords": [ 28 | "react", 29 | "react-native", 30 | "ListView", 31 | "wrapper" 32 | ], 33 | "author": " ", 34 | "license": "MIT", 35 | "bugs": { 36 | "url": "https://github.com/nachoaIvarez/react-native-scrollable-list/issues" 37 | }, 38 | "homepage": "https://github.com/nachoaIvarez/react-native-scrollable-list#readme", 39 | "devDependencies": { 40 | "babel-cli": "^6.9.0", 41 | "babel-core": "^6.9.1", 42 | "babel-eslint": "*", 43 | "babel-preset-es2015": "^6.9.0", 44 | "babel-preset-react-native": "^1.9.0", 45 | "dependency-check": "*", 46 | "eslint-config-airbnb": "*", 47 | "eslint-plugin-import": "*", 48 | "eslint-plugin-jsx-a11y": "*", 49 | "eslint-plugin-react": "*", 50 | "eslint": "*", 51 | "react-native": "*", 52 | "react": "*", 53 | "rimraf": "*" 54 | }, 55 | "peerDependencies": { 56 | "react": "*", 57 | "react-native": "*" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-scrollable-list 2 | 3 | [![Build Status][travis-badge]][travis-url] 4 | [![NPM version][npm-image]][npm-url] 5 | [![Dependency Status][depstat-image]][depstat-url] 6 | [![Downloads][download-badge]][npm-url] 7 | 8 | > A ListView without the boilerplate. 9 | 10 | ## Install 11 | 12 | ```sh 13 | npm install --save react-native-scrollable-list 14 | ``` 15 | 16 | ## Usage 17 | 18 | ```js 19 | import ScrollableList from 'react-native-scrollable-list' 20 | // other imports 21 | 22 | const celebrities = [ 23 | { 24 | name: 'Leonardo Di Caprio', 25 | role: 'Actor', 26 | }, 27 | { 28 | name: 'Luís Suárez', 29 | role: 'Football Player', 30 | }, 31 | { 32 | name: 'Eddie Van Halen', 33 | role: 'Guitar Player', 34 | }, 35 | ] 36 | 37 | const Celebrity = ({name, role}) => (Name: {name}{'\n'}Role: {role}) 38 | 39 | export default ( } />) 40 | ``` 41 | 42 | That's it. 43 | 44 | That will render a `ListView`, with all the `dataSource`, `cloneWithRows`, and all that boilerplate code nobody wants to write. And, when `data` changes, updates `dataSource` gracefully, without forcing re-rendering. 45 | 46 | ## Props 47 | First, check [`ListView`'s props](https://facebook.github.io/react-native/docs/listview.html). `ScrollableList` is compliant. If you want to pass any of the `ListView` props (like `style`, `onEndReached`, `onChangeVisibleRows`, etc), just pass them to `ScrollableList`, and they will reach `ListView`. 48 | 49 | ## License 50 | 51 | MIT © [Nacho Álvarez](http://github.com/nachoaIvarez) 52 | 53 | [npm-url]: https://npmjs.org/package/react-native-scrollable-list 54 | [npm-image]: https://img.shields.io/npm/v/react-native-scrollable-list.svg?style=flat-square 55 | 56 | [depstat-url]: https://david-dm.org/nachoaIvarez/react-native-scrollable-list 57 | [depstat-image]: https://david-dm.org/nachoaIvarez/react-native-scrollable-list.svg?style=flat-square 58 | 59 | [download-badge]: http://img.shields.io/npm/dm/react-native-scrollable-list.svg?style=flat-square 60 | 61 | [travis-badge]: https://api.travis-ci.org/nachoaIvarez/react-native-scrollable-list.svg?branch=master 62 | [travis-url]: https://travis-ci.org/nachoaIvarez/react-native-scrollable-list 63 | --------------------------------------------------------------------------------