V3 - FlatList signature, renamed components, performance improvements #77
Conversation
…render oth horizontal and vertical rows
|
@andersonaddo Please review this PR when you have time. I have refactored SectionGrid as well to use common functions. Please see readme of v3 branch |
SuperGridSectionList.js
Outdated
| if (!staticDimension) { | ||
| const { width, height } = e.nativeEvent.layout || {}; | ||
| const newTotalDimension = horizontal ? height : width; | ||
|
|
There was a problem hiding this comment.
Yes, this is in onLayout. e.nativeEvent.layout will give the available dimension of the whole component. This is executed when the orientation of the device get changed.
There was a problem hiding this comment.
Yeah I just realized that 😄. Wasn't easy to tell when I was reading the diffs. I've now deleted that review.
SuperGridSectionList.js
Outdated
| </View> | ||
| ); | ||
| } | ||
| const groupedSections = sections.map(({ title, data }) => { |
There was a problem hiding this comment.
I did check those two issues. That was a fix for JSON.parse based cloning.
But I didn't see any particular reason we had to clone it. chunkArray do not modify the actual items. Do you remember why you had to clone it?
Map is working just fine. I did put some keys with function as values in the items and it worked fine.
There was a problem hiding this comment.
My original code didn't use .map. It passed the original sections array directly into the chunkArray function, which ended up altering and condensing the sections array with every re-render (I think it had to do with the fact that it was an array of objects, not primitives. But I don't completely remember though)
I didn't realize I could just use map, that's why I cloned the whole array instead.
| import React, { Component } from 'react'; | ||
| import { StyleSheet, View, Text } from 'react-native'; | ||
| import GridView from 'react-native-super-grid'; | ||
| import { FlatGrid } from 'react-native-super-grid'; | ||
|
|
There was a problem hiding this comment.
This is meant to be an example for the SectionGrid, but it's FlatGrid code that's displayed here.
There was a problem hiding this comment.
Yea. My bad. Fixing it shortly.
SuperGridSectionList.js
Outdated
| if (!staticDimension) { | ||
| const { width, height } = e.nativeEvent.layout || {}; | ||
| const newTotalDimension = horizontal ? height : width; | ||
|
|
There was a problem hiding this comment.
Yes, this is in onLayout. e.nativeEvent.layout will give the available dimension of the whole component. This is executed when the orientation of the device get changed.
|
I won't be able to test it out for a few days (laptop issues), but it looks okay from here. You can merge it now if you want, and I'll test it afterwards (especially since you've already tested it before). |
|
Ok. I will merge it and release to npm. I have tested all scenarios and worked fine for me. Thanks 👍 |
Exports two components FlatGrid and SectionGrid
FlatList like signature for FlatGrid
Common styles and calculation
Performance Improvements