React Native SectionList with columns

user_15141099 0
Viewed 2065

I am trying to get a section list shown up having multiple columns. Since section list have that feature not out of the box, I thought it might be a good idea to render a flatlist for every section item.. but I do not get it to work.

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

import { FlatList } from "react-native";
import { SectionList } from "react-native";




class Account extends Component {


  data2 =
  [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Third Item',
    },
  ];

  data3 =
  [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28adfba',
      title: '22--First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91adafa97f63',
      title: '22--Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571efadfee29d72',
      title: '22--Third Item',
    },
  ];

  data4 = ['a', 'b', 'c']

  data = [
    {sectionTitle: 'test-title-alpha', data: [this.data2]},
    {sectionTitle: 'test-title-beta', data: [this.data3]},
  ];


  _renderItem = ({item}) => {
    console.log('render-item', item);
      return (
          <Text>item: {item}</Text>
      )
  }

  _renderSectionHeader = ({item}) => {
    console.log('section-header', item);
      return (
          <Text>section header: {item}</Text>
      )
  }

  _renderSectionListItem = ({item}) => {
    console.log('section-list-item', item);
      return (
          <FlatList
              data={item}
              numColumns={3}
              renderItem={this._renderItem}
              //keyExtractor={item => item.id}
          />
      )
  }

  render () {
    console.log('render', this.data);
    console.log(this.data[0].sectionTitle);
    return (
        <SectionList
            sections={this.data}
            renderSectionHeader={this._renderSectionHeader}
            renderItem={this._renderSectionListItem}
            //keyExtractor={item => item.id}
        />
    )
  }
}

export default Account;

using data4 seems to proceed, using data2 or data3 seems not.

Anybody see my failure(s)?

Final output should be somethink near to:

first-section-title
item1.id                    item2.id                    item3.id
item1.title                 item2.title                 item3.title
item1.whatever              item2.whatever              item3.whatever  

second-section-title
item4.id                    item5.id                    item6.id
item4.title                 item5.title                 item6.title
item4.whatever              item5.whatever              item6.whatever  

...

(grid view, with x items per row)

from source

 data = [
    {
        sectionTitle: 'first-section-title',
        data: [
            [
                {
                  id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                  title: 'First Item',
                },
                {
                  id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
                  title: 'Second Item',
                },
                {
                  id: '58694a0f-3da1-471f-bd96-145571e29d72',
                  title: 'Third Item',
                },
                {
                  id: '58694a0f-3da1-471f-bd96-145571e29d43',
                  title: 'and so on',
                },
              ]
            ]
    },
    {
        sectionTitle: 'second-section-title',
        data: [
            [
                {
                  id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                  title: '5 Item',
                },
                {
                  id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
                  title: '6 Item',
                },
              ]
            ]
    },
  ];
react-native-sectionlist react-native-flatlist react-native reactjs
1 Answers

working example (if somebody else should although need it)

import React, { Component } from 'react';
import { Text, View, FlatList, SectionList } from "react-native"

const sections = [
  {
    title: "Vegetables",
    key: "vegetables",
    data: [
     {
       list: [
          {
            name: "Carrot",
            color: "Orange",
          },
          {
            name: "Cabbage",
            color: "Purple",
          },
        ],
      },
    ],
  },
  {
    title: "Fruits",
    key: "fruits",
    data: [
      {
        list: [
          {
            name: "Apple",
            color: "Green",
          },
          {
            name: "Banana",
            color: "Yellow",
          },
          {
            name: "Strawberry",
            color: "Red",
          },
          {
            name: "Blueberry",
            color: "Blue",
          },
        ],
      },
    ],
  },
]

class Account extends Component {
  renderSection = ({ item }) => {
    return (
      <FlatList
        data={item.list}
        numColumns={2}
        renderItem={this.renderListItem}
        keyExtractor={this.keyExtractor}
      />
    )
  }

  renderSectionHeader = ({ section }) => {
    return <Text>{section.title}</Text>
  }

  renderListItem = ({ item }) => {
      return (
        <View style={{height: 50, width: 100, borderColor: "green", borderWidth: 1 }}>
          <Text>{item.name}</Text>
          <Text>{item.color}</Text>
        </View>
      )
    }

  keyExtractor = (item) => {
    return item.name
  }

  render () {
    return (
      <SectionList
        sections={sections}
        renderSectionHeader={this.renderSectionHeader}
        renderItem={this.renderSection}
      />
    )

  }
}
export default Account;
user_151410990
Related