react-native-invertible-scroll-view - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

InvertibleScrollView.js

 'use strict';
 
-let React = require('react-native');
-let {
+import React, {
   PropTypes,
@@ -9,6 +8,6 @@ ScrollView,
   View,
-} = React;
-let ScrollableMixin = require('react-native-scrollable-mixin');
+} from 'react-native';
+import ScrollableMixin from 'react-native-scrollable-mixin';
 
-let cloneReferencedElement = require('react-native-clone-referenced-element');
+import cloneReferencedElement from 'react-clone-referenced-element';
 
@@ -15,0 +14,0 @@ type DefaultProps = {

package.json

 {
   "name": "react-native-invertible-scroll-view",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "An invertible ScrollView for React Native",
@@ -23,5 +23,5 @@ "main": "InvertibleScrollView.js",
   "dependencies": {
-    "react-native-clone-referenced-element": "^1.0.0",
+    "react-clone-referenced-element": "^1.0.1",
     "react-native-scrollable-mixin": "^1.0.1"
   }
 }

README.md

@@ -21,18 +21,79 @@ # InvertibleScrollView [![Slack](http://slack.exponentjs.com/badge.svg)](http://slack.exponentjs.com)
 ```js
-var React = require('react-native');
-var InvertibleScrollView = require('react-native-invertible-scroll-view');
-var {
+import React from 'react-native';
+let {
   ListView,
+  Text,
+  TouchableHighlight,
+  View,
+  StyleSheet,
 } = React;
+import InvertibleScrollView from 'react-native-invertible-scroll-view';
 
-// Inside of a component's render() method:
-render() {
-  return (
-    <ListView
-      renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
-      dataSource={...}
-      renderRow={...}
-    />
-  );
+class InvertedScrollComponent extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this._data = [];
+    this.state = {
+      dataSource: new ListView.DataSource({
+        rowHasChanged: (r1, r2) => r1 !== r2,
+      }),
+    };
+  }
+
+  render() {
+    return (
+      <ListView
+        renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
+        dataSource={this.state.dataSource}
+        renderHeader={this._renderHeader.bind(this)}
+        renderRow={this._renderRow.bind(this)}
+        style={styles.container}
+      />
+    );
+  }
+
+  _renderHeader() {
+    return (
+      <TouchableHighlight
+        onPress={this._onPress.bind(this)}
+        style={styles.button}>
+        <Text>Add a row</Text>
+      </TouchableHighlight>
+    );
+  },
+
+  _renderRow(row) {
+    return <Text key={row} style={styles.row}>{row}</Text>
+  },
+
+  _onPress() {
+    this._data.push(`${new Date}`);
+    var rows = this._data;
+    // It's important to keep row IDs consistent to avoid extra rendering. You
+    // may need to reverse the list of row IDs so the so that the inversion
+    // will order the rows correctly.
+    var rowIds = rows.map((row, index) => index).reverse();
+    this.setState({
+      dataSource: this.state.dataSource.cloneWithRows(rows, rowIds),
+    });
+  }
 }
+
+let styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  button: {
+    padding: 20,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: 'black',
+  },
+  row: {
+    padding: 4,
+  },
+}
 ```
@@ -39,0 +100,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8394

increased by19.97%

Number of lines in readme file

115

increased by112.96%

Worsened metrics

Lines of code

68

decreased by-1.45%

Dependency changes

• + Addedreact-clone-referenced-element@^1.0.1

• + Addedreact-clone-referenced-element@1.1.1(transitive)

• - Removedreact-native-clone-referenced-element@^1.0.0

• - Removedreact-native-clone-referenced-element@1.0.0(transitive)