feat(Init): First release

Author: st0ffern

.travis.yml

@@ -0,0 +1,17 @@
+language: node_js
+cache:
+  directories:
+    - node_modules
+notifications:
+  email: false
+node_js:
+  - '7'
+  - '6'
+  - '4'
+before_script:
+  - npm prune
+after_success:
+  - npm run semantic-release
+branches:
+  except:
+    - /^v\d+\.\d+\.\d+$/

README.md

@@ -1,2 +1,46 @@
 # react-native-optimized-flatlist
-Optimization for complex and slow React Native FlatLists
+![](https://img.shields.io/npm/v/react-native-optimized-flatlist.svg)
+
+__Optimization for FlatLists. This is a fix over the FlatList that removed every item that is not inside the viewport. This will give a more stable and faster FlatList as performance dont drop! :)__
+
+Please also read more about the issue here:
+https://github.com/facebook/react-native/issues/13413
+
+## Installation
+```
+npm i -S react-native-optimized-flatlist
+```
+or
+```
+yarn add react-native-optimized-flatlist
+```
+
+
+## Usage
+Just replace `FlatList` with `OptimizedFlatList` .. thats all! :)
+
+Replace this:
+```js
+render() {
+  return (
+  <FlatList
+    data={[{name: 'fred', name: 'freddy'}]}
+    renderItem={ ({item}) => <View>{item.name}</View>}
+    />
+...
+```
+With this:
+```js
+...
+import {OptimizedFlatList} from 'react-native-optimized-flatlist'
+
+...
+render() {
+  return (
+  <OptimizedFlatList
+    data={[{name: 'fred', name: 'freddy'}]}
+    renderItem={ ({item}) => <View>{item.name}</View>}
+    />
+...
+
+```

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-native-optimized-flatlist",
+  "version": "0.0.0-development",
+  "description": "Optimization for complex and slow React Native FlatLists",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 0",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stoffern/react-native-optimized-flatlist.git"
+  },
+  "keywords": [
+    "react-native",
+    "flatlist"
+  ],
+  "author": "stoffern",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/stoffern/react-native-optimized-flatlist/issues"
+  },
+  "homepage": "https://github.com/stoffern/react-native-optimized-flatlist#readme",
+  "devDependencies": {
+    "cz-conventional-changelog": "^2.0.0",
+    "semantic-release": "^6.3.2"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

src/FlatListItem.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { 
+  View,
+} from 'react-native'
+
+
+export default class FlatListItem extends React.PureComponent {
+  static propTypes = {
+    viewComponent: React.PropTypes.element.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      visibility: true,
+    }
+  }
+
+  onLayout(evt) {
+    this.viewProperties = {
+      width: 0,
+      height: 0,
+    }
+    this.viewProperties.width = evt.nativeEvent.layout.width;
+    this.viewProperties.height = evt.nativeEvent.layout.height;
+  }
+
+  setVisibility(visibility) {
+    if (this.state.visibility != visibility) {
+      if (visibility == true) this.setState({ visibility: true })
+      else this.setState({ visibility: false })
+    }
+  }
+
+  render() {
+    if (this.state.visibility === false) {
+      return ( <View style={{ width: this.viewProperties.width, height: this.viewProperties.height }} /> )
+    }
+
+    return (
+      <View onLayout={this.onLayout.bind(this)}>
+        {this.props.viewComponent}
+      </View>
+    )
+  }
+}

src/OptimizedFlatList.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { 
+  FlatList,
+} from 'react-native'
+
+import ListItem from './ListItem'
+
+export default class OptimizedFlatList extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.state = {}
+    this.rowRefs =[]
+  }
+
+  _addRowRefs(ref, data){
+    this.rowRefs[data.index] = {
+      ref: ref,
+      item: data.item,
+      index: data.index,
+    }
+  }
+  
+  _updateItem(index, visibility){
+    this.rowRefs[index].ref.setVisibility(visibility)
+    return visibility
+  }
+
+  _renderItem(data){
+    const view = this.props.renderItem(data)
+    return (
+      <ListItem
+        ref={ myItem => this._addRowRefs(myItem, data)}
+        viewComponent={view}
+        data={data}
+      />
+    )
+  }
+
+  _onViewableItemsChanged (info: {
+      changed: Array<{
+        key: string,
+        isViewable: boolean,
+        item: any,
+        index: ?number,
+        section?: any,
+      }>
+    }
+  ) {
+    info.changed.map(item => 
+      this._updateItem(item.index, item.isViewable)
+    )
+  }
+
+  render() {
+    return (
+      <FlatList
+        {...this.props}
+        renderItem={ data => this._renderItem(data) }
+        onViewableItemsChanged={this._onViewableItemsChanged.bind(this)}
+      />
+    )
+  }
+}

src/index.js

@@ -0,0 +1,2 @@
+export {default as OptimizedFlatList} from './OptimizedFlatList'
+export {default as FlatListItem} from './FlatListItem'