React Native-এ SectionList কম্পোনেন্ট ব্যবহার করা

SectionList হলো একটি পারফরম্যান্স-অপ্টিমাইজড লিস্ট কম্পোনেন্ট যা ডেটাকে সেকশন (বিভাগ) অনুযায়ী রেন্ডার করে। বড় ডেটাসেটের জন্য FlatList-এর চেয়ে ভালো।

বেসিক সিনট্যাক্স

<SectionList
  sections={dataArray}
  renderItem={renderItemFunc}
  renderSectionHeader={headerFunc}
  keyExtractor={keyFunc}
/>

ইম্পোর্ট

import { SectionList } from 'react-native';

মূল প্রপস

উদাহরণ ১: বেসিক SectionList

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

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [
        { title: 'JavaScript Frameworks', data: ['Angular', 'ReactJS', 'VueJS', 'ReactNative'] },
        { title: 'PHP Frameworks', data: ['Laravel', 'CodeIgniter', 'CakePHP', 'Symfony'] }
      ]
    };
  }

  renderItem = ({ item }) => (
    
      {item}
    
  );

  render() {
    return (
      
         index.toString()}
          renderSectionHeader={({ section: { title } }) => (
            {title}
          )}
        />
      
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, marginTop: 20, marginHorizontal: 16 },
  item: { backgroundColor: '#ccc2ff', padding: 20, marginVertical: 8 },
  header: { fontSize: 22, fontWeight: 'bold', backgroundColor: '#fff', paddingVertical: 10 }
});

উদাহরণ ২: Sticky Section Headers

<SectionList
  stickySectionHeadersEnabled={true}
  sections={this.state.data}
  renderItem={this.renderItem}
  keyExtractor={(item, index) => index.toString()}
  renderSectionHeader={({ section: { title } }) => (
    {title}
  )}
/>

stickySectionHeadersEnabled={true} দিলে স্ক্রোল করার সময় সেকশন হেডার টপে আটকে থাকবে, পরবর্তী হেডার আসার আগে পর্যন্ত।

কখন SectionList ব্যবহার করবেন?

• ডেটা ক্যাটাগরি/গ্রুপ অনুযায়ী বণ্টন করা থাকলে (যেমন: কন্টাক্ট লিস্ট A-Z, ইকমার্স ক্যাটাগরি)।
• হেডার/ফুটার সাপোর্ট দরকার হলে।
• পারফরম্যান্স খুব জরুরি হলে (ভার্চুয়ালাইজড রেন্ডারিং)।