From ef2f731269bd77e4c3b66f96fb19e83a4a10981b Mon Sep 17 00:00:00 2001 From: Arend van Beelen jr Date: Mon, 30 Jul 2018 14:34:16 +0200 Subject: [PATCH 1/4] Implement inverted prop. --- README.md | 4 +++- .../RNRecyclerViewList/RecyclerViewBackedScrollView.java | 5 +++++ .../RecyclerViewBackedScrollViewManager.java | 5 +++++ src/RecyclerViewList.js | 2 ++ 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e9973d0..0ca3cc0 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ A RecyclerView implementation for ReactNative, that overcomes some limitations o - **Control the scrolling velocity**: the `velocity` param in the `scrollToIndex` method is exactly for this - **Initial scroll index**: specify the scroll position at startup, and there will be no flicker - **Low memory usage**: it renders just the visible items plus some extra items around +- **Supports both scroll direction**: use the `inverted` prop to invert the scroll direction ## Caveats @@ -93,7 +94,8 @@ Prop name | Description | Type | Default value `initialListSize` | Number of items to render at startup. | int | 10 `initialScrollIndex` | Index of the item to scroll at startup | int | none `initialScrollOffset` | Offset of the scroll position at startup | int | none -`itemAnimatorEnabled` | Whether animates items when they are added or removed | boolean | true +`inverted` | Reverses the scrolling direction; the first model from the data source is rendered at the bottom | boolean | false +`itemAnimatorEnabled` | Whether animates items when they are added or removed | bool | true `ListHeaderComponent` | Component to render as header | component | none `ListFooterComponent` | Component to render as footer | component | none `ListEmptyComponent` | Component to render in case of no items | component | none diff --git a/android/src/main/java/com/github/godness84/RNRecyclerViewList/RecyclerViewBackedScrollView.java b/android/src/main/java/com/github/godness84/RNRecyclerViewList/RecyclerViewBackedScrollView.java index 58fab47..2bcbc6d 100644 --- a/android/src/main/java/com/github/godness84/RNRecyclerViewList/RecyclerViewBackedScrollView.java +++ b/android/src/main/java/com/github/godness84/RNRecyclerViewList/RecyclerViewBackedScrollView.java @@ -452,6 +452,11 @@ public int calculateDtToFit(int viewStart, int viewEnd, int boxStart, int boxEnd this.getLayoutManager().startSmoothScroll(smoothScroller); } + public void setInverted(boolean inverted) { + LinearLayoutManager layoutManager = (LinearLayoutManager) getLayoutManager(); + layoutManager.setReverseLayout(inverted); + } + public void setItemAnimatorEnabled(boolean enabled) { if (enabled) { DefaultItemAnimator animator = new DefaultItemAnimator(); diff --git a/android/src/main/java/com/github/godness84/RNRecyclerViewList/RecyclerViewBackedScrollViewManager.java b/android/src/main/java/com/github/godness84/RNRecyclerViewList/RecyclerViewBackedScrollViewManager.java index c83f2f8..68f43b0 100644 --- a/android/src/main/java/com/github/godness84/RNRecyclerViewList/RecyclerViewBackedScrollViewManager.java +++ b/android/src/main/java/com/github/godness84/RNRecyclerViewList/RecyclerViewBackedScrollViewManager.java @@ -75,6 +75,11 @@ public void setItemCount(RecyclerViewBackedScrollView parent, int itemCount) { parent.getAdapter().notifyDataSetChanged(); } + @ReactProp(name = "inverted", defaultBoolean = false) + public void setInverted(RecyclerViewBackedScrollView parent, boolean inverted) { + parent.setInverted(inverted); + } + @ReactProp(name = "itemAnimatorEnabled", defaultBoolean = true) public void setItemAnimatorEnabled(RecyclerViewBackedScrollView parent, boolean enabled) { parent.setItemAnimatorEnabled(enabled); diff --git a/src/RecyclerViewList.js b/src/RecyclerViewList.js index 0420d60..71f9b8e 100644 --- a/src/RecyclerViewList.js +++ b/src/RecyclerViewList.js @@ -56,6 +56,7 @@ class RecyclerView extends React.PureComponent { initialListSize: PropTypes.number, initialScrollIndex: PropTypes.number, initialScrollOffset: PropTypes.number, + inverted: PropTypes.bool, itemAnimatorEnabled: PropTypes.bool, ListHeaderComponent: PropTypes.element, ListFooterComponent: PropTypes.element, @@ -68,6 +69,7 @@ class RecyclerView extends React.PureComponent { dataSource: new DataSource([], (item, i) => i), initialListSize: 10, windowSize: 30, + inverted: false, itemAnimatorEnabled: true, } From a5daa45c3ec67b305dbc07f3421ab872ceaf1328 Mon Sep 17 00:00:00 2001 From: Arend van Beelen jr Date: Mon, 30 Jul 2018 14:58:44 +0200 Subject: [PATCH 2/4] No need to modify the other README line. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0ca3cc0..f026780 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ Prop name | Description | Type | Default value `initialScrollIndex` | Index of the item to scroll at startup | int | none `initialScrollOffset` | Offset of the scroll position at startup | int | none `inverted` | Reverses the scrolling direction; the first model from the data source is rendered at the bottom | boolean | false -`itemAnimatorEnabled` | Whether animates items when they are added or removed | bool | true +`itemAnimatorEnabled` | Whether animates items when they are added or removed | boolean | true `ListHeaderComponent` | Component to render as header | component | none `ListFooterComponent` | Component to render as footer | component | none `ListEmptyComponent` | Component to render in case of no items | component | none From 0086aefde59ea13e1c2343ace94f99e0b8eb74cc Mon Sep 17 00:00:00 2001 From: Filippo Dossena Date: Wed, 1 Aug 2018 17:58:11 +0200 Subject: [PATCH 3/4] Add `inv` button to example app in order to test `inverted` prop --- example/App.android.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/example/App.android.js b/example/App.android.js index d4da09d..fdbbe0c 100644 --- a/example/App.android.js +++ b/example/App.android.js @@ -32,12 +32,13 @@ export default class example extends Component { var data = Array(10).fill().map((e,i) => newItem()); this.state = { - dataSource: new DataSource(data, (item, index) => item.id) + dataSource: new DataSource(data, (item, index) => item.id), + inverted: false }; } render() { - const { dataSource } = this.state; + const { dataSource, inverted } = this.state; return ( @@ -49,11 +50,12 @@ export default class example extends Component { renderItem={this.renderItem} windowSize={20} initialScrollIndex={0} + inverted={inverted} ListHeaderComponent={( )} ListFooterComponent={( - + )} ListEmptyComponent={( @@ -111,6 +113,10 @@ export default class example extends Component { this._recycler && this._recycler.scrollToIndex({ index, animated: false }); ToastAndroid.show('Scrolled to item: ' + item.id, ToastAndroid.SHORT); }} /> + +