numColumns not working in sections list
vaandhare opened this issue · 1 comments
vaandhare commented
Hi,
I am currently working with big list, where my requirement is to show section list with two columns. By using numColumns prop, screen in divided in two halves, where first half of the screen is rendered with items, leaving the second half blank.
Also, the list is initially rendered as blank and becomes visible on re-render.
Versions:
"react-native-big-list": "^1.6.1",
"react-native": "0.68.0",
"react": "18.2.0",
vaandhare commented
const dummyData = [
[
// Section 0
{label: '1', value: 1 /* ... */},
{label: '2', value: 2 /* ... */},
],
[
// Section 1
{label: '3', value: 3 /* ... */},
{label: '4', value: 4 /* ... */},
],
[
// Section 2
{label: '6', value: 6 /* ... */},
{label: '6', value: 6 /* ... */},
],
/* ... */
];
const headersdummy = ['Header 1', 'Header 2', 'Header 3'];
const renderDummy = (item: any) => {
console.log(item);
return (
<View
style={{
borderWidth: 1,
borderColor: BLACK,
marginVertical: 4,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{fontSize: 15, color: BLACK}}>{item.item.label}</Text>
</View>
);
};
const renderHeader = (section: any) => {
return (
<View>
<Text>{headersdummy[section]}</Text>
</View>
);
};
return (
<BigList
sections={dummyData}
numColumns={2}
renderItem={renderDummy}
itemHeight={30}
renderSectionHeader={renderHeader}
sectionHeaderHeight={25}
/>
);