dynamic item height issue

[necipfzlakay]

Hi there

I was using SectionList for a huge infinity scroll list. However, after 50+ items, scrolling was terrible. when you reach the end of the list it throws you half of it or there were different scrolling issues.

Now I tried to use this library but SectionList logic is different.
My list looks like:

const data = [
{ sectionHeader: 'title 1', data: [ ... ,...] },
{ sectionHeader: 'title 2', data: [ ... ,...] },
{ sectionHeader: 'title 3', data: [ ... ,...] },
] 

but this library' s sectionlist data must be:

const sections = [
  [
    { label: "1", value: 1 /* ... */ },
    { label: "2", value: 2 /* ... */ },
  ],
  [
    { label: "3", value: 3 /* ... */ },
    { label: "4", value: 4 /* ... */ },
  ],
  [
    { label: "6", value: 6 /* ... */ },
    { label: "6", value: 6 /* ... */ },
  ],
  /* ... */
];

how can I determine the section header's content?

Also when I am using Standard list, I can not give exact itemHeight because my section's data is dynamic and I can not reach length of the section items outside of the renderSection. so items are getting into each other.

Is there anyone who has an idea?

[Jaybee4real]

@marcocesarato Seconded

[necipfzlakay]

any help :(((

[fukemy]

DEAD LIB

[UPraggy]

I'm using this solution, I use a number as if it were a percentage for example "50%" == windowHeight*0.5

import (Dimensions} from 'react-native'
const windowHeight = Dimensions.get('window').height;
itemHeight={windowHeight*0.17} 

Another solution -> create your function to calculate size for different devices,
i find the commum number and use in calculu

itemHeight={()=>{
            //592 - 124,32 - 22% - Nexus 5 Api / 28 5 inches
            //777.6 - 124,416 - 16% - Sam M32 / 6.4 inches
            //Calculation to find common height of items between devices of different sizes
            let heightTemp = Math.round((124.35 / windowHeight)*100)
            heightTemp = heightTemp/100 
            return windowHeight*heightTemp
        }}