🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

React Native Scroll

Documentation

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


You May Also Like