react-native-synchronous-list
Consept
What:
This is an infinite list implementation that uses a template defined in javascript to render it's (native) children through an interesting mechanism called synchronous rendering first envisioned by Tal Kol from wix.
Why:
Because trying to render children on the fly while scrolling sends to much information through the RNBridge and blocks it. As a result we see a white flicker when scrolling fast, plus it doesn't give the native feeling that native lists give.
How:
- When the app starts we register a component "template" that we'll be using as our row view of our native list.
- We then create a set of instructions so that the native side knows how to convert that template into a native view
- Finally we use the list like a typical native UI component
Here's his initial proof of concept project:
Installation
1 . $ npm install --save react-native-synchronous-list
or
$ yarn add react-native-synchronous-list
2 . $ react-native link react-native-synchronous-list
3 . Run the project
You should able to see this:
| iOS | Android |
|---|---|
 |  |
Caution
That's still a WIP project and you should definitely not use it as it is on production apps.
Typical usage
Step 1:
Basically you first register a template synchronously by invoking the SyncRegistry.
Here's how a template looks like and here's where we register it.
So we'll declare that jsx template and the native code will create a recipe out of it. Next time we want to create that view, the native code will create a new view based on that recipe (without the need to go to javascript) - it all happens on the native side now.
Step 2:
Prepare the native component for rendering
this.synchronousList.prepareRows(); In the example we just do it whenever we first get a ref of the list.
Step 3:
Then all you have to do is render the list like a normal js component.
Available props
| Name | Type | Description | Default |
|---|---|---|---|
| data | array | REQUIRED The data that we'll be mapping to our views | - |
| numRenderRows | number | REQUIRED The total views we'll be re/using (this list is recycling views remember?). Choose a value that's big enough so that the rows cover at least 1 screen. | - |
| loopMode | string | Either no-loop (typical list), repeat-empty (a list that repeats empty views after we're out of data or repeat-edge (a least that repeats views that were in the beggining of our data once we're out of data (infinite loop mode) | no-loop |
| horizontal | bool | Wether we'll be running the list in horizontal mode or vertical | false |
| dynamicViewSizes | bool | True if we'll be calculating the row sizes based on the props data or false if we'll be using the rowHeight and rowWidth static values | false |
| rowHeight | number | The height of each row when using the list in static row size mode. | - |
| rowWidth | number | The width of each row when using the list in static row size mode. | - |
| templateName | string | The name of the template object we'll be using. (No need to change that) | 'RNSynchronousListRowTemplate' |
Exposed methods
- (Promise) prependDataToDataSource(newData : Array) Prepends the newData to the list datasource
- (Promise) appendDataToDataSource(newData : Array) Appends the newData to the list datasource
- (Promise) updateDataAtIndex(index: int, newData : Object) Updates the data of the specified item
- (void) scrollToItem(position: int) Scrolls to the position specified
Example
See the RNExample folder
Todo
| TODO | Status |
|---|---|
| Recipe registration implementation | |
| SyncRootView implementation | |
| RecyclerListView implementation | |
RecyclerListView row item item (extends SyncRootView) | |
| Reload working ( RN Issue here ) |
License
MIT © Ioannis Kokkinidis 2017-2018
