react-native-big-list icon indicating copy to clipboard operation
react-native-big-list copied to clipboard

numColumns not working in sections list

Open mr-volatile opened this issue 2 years ago • 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",

mr-volatile avatar Apr 10 '23 12:04 mr-volatile

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

mr-volatile avatar Apr 11 '23 04:04 mr-volatile