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' |

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 )| :x: |

License

MIT © Ioannis Kokkinidis 2017-2018