How do you handle section headers in SectionList

1. Defining the Data Structure:
- The data should be structured into sections. Each section should have a title and a list of items. For example:

javascript
     const sections = [
       {
         title: 'Section 1',
         data: [...],
       },
       {
         title: 'Section 2',
         data: [...],
       },
     ];
     

2. Using the `sections` Prop:
- The `sections` prop is used to pass the data to the `SectionList`. Each section should have a `title` and a `data` property.

javascript
     <SectionList
       sections={sections}
       renderItem={({ item }) => <Text>{item}</Text>}
       renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
     />
     

3. Rendering Section Headers:
- The `renderSectionHeader` prop is used to render the section headers. This function takes a `section` object as an argument and returns the JSX for the header.

javascript
     renderSectionHeader={({ section }) => <Text style={styles.header}>{section.title}</Text>}
     

4. Customizing Section Headers:
- You can customize the appearance of section headers by adding styles to the `renderSectionHeader` function.

javascript
     renderSectionHeader={({ section }) => (
       <View style={styles.headerContainer}>
         <Text style={styles.header}>{section.title}</Text>
       </View>
     )}
     

5. Handling Sticky Section Headers:
- If you want the section headers to stick to the top of the screen until the next one pushes it off, you can set `stickySectionHeadersEnabled` to `true`.

javascript
     <SectionList
       sections={sections}
       renderItem={({ item }) => <Text>{item}</Text>}
       renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
       stickySectionHeadersEnabled={true}
     />
     

6. Using `keyExtractor`:
- The `keyExtractor` prop is used to extract a unique key for each item. This is necessary for React to keep track of the items and their order.

javascript
     keyExtractor={(item, index) => item.id.toString()}
     

Here is a complete example of a `SectionList` with section headers:

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

const sections = [
  {
    title: 'Section 1',
    data: ['Item 1', 'Item 2', 'Item 3'],
  },
  {
    title: 'Section 2',
    data: ['Item 4', 'Item 5', 'Item 6'],
  },
];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eafffe',
  },
  headerContainer: {
    backgroundColor: '#f0f0f0',
    padding: 10,
  },
  header: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  item: {
    padding: 10,
    fontSize: 16,
  },
});

const App = () => {
  return (
    <View style={styles.container}>
      <SectionList
        sections={sections}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        renderSectionHeader={({ section }) => (
          <View style={styles.headerContainer}>
            <Text style={styles.header}>{section.title}</Text>
          </View>
        )}
        stickySectionHeadersEnabled={true}
        keyExtractor={(item, index) => item.toString()}
      />
    </View>
  );
};

export default App;

This example demonstrates how to use `SectionList` to display a list of items grouped by sections, with custom section headers and item rendering. It also includes styles for the section headers and items.