marcocesarato/react-native-big-list

numColumns not working in sections list

vaandhare opened this issue · 1 comments

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",

image

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}
    />
  );