rns
react-native-synchronous-list
npm i react-native-synchronous-list
rns

react-native-synchronous-list

A react-native list (for iOS and Android) that renders it's children synchronously (without accessing javascript on each row render)

by Ioannis Kokkinidis

0.2.1 (see all)License:MITTypeScript:Not Found
npm i react-native-synchronous-list
Readme

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:

iOSAndroid

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

NameTypeDescriptionDefault
dataarrayREQUIRED The data that we'll be mapping to our views-
numRenderRowsnumberREQUIRED 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.-
loopModestringEither 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
horizontalboolWether we'll be running the list in horizontal mode or verticalfalse
dynamicViewSizesboolTrue 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 valuesfalse
rowHeightnumberThe height of each row when using the list in static row size mode.-
rowWidthnumberThe width of each row when using the list in static row size mode.-
templateNamestringThe name of the template object we'll be using. (No need to change that)'RNSynchronousListRowTemplate'

Example

See the RNExample folder

Todo

TODOStatus
Recipe registration implementation
SyncRootView implementation
RecyclerListView implementation
RecyclerListView row item item (extends SyncRootView)
Reload working ( RN Issue here )

License

MIT © Ioannis Kokkinidis 2017-2018

Downloads/wk

1

GitHub Stars

43

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.2.1
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate