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.
- 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:
$ npm install --save react-native-synchronous-list
$ yarn add react-native-synchronous-list
$ react-native link react-native-synchronous-list
3 . Run the project
You should able to see this:
That's still a WIP project and you should definitely not use it as it is on production apps.
Basically you first register a template synchronously by invoking the SyncRegistry.
Prepare the native component for rendering
In the example we just do it whenever we first get a ref of the list.
Then all you have to do is render the list like a normal js component.
|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)||
|horizontal||bool||Wether we'll be running the list in horizontal mode or vertical||
|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||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'|
See the RNExample folder
|Recipe registration implementation||✅|
|RecyclerListView row item item (extends
|Reload working ( RN Issue here )||❌|
MIT © Ioannis Kokkinidis 2017-2018