How can I use SectionList with hooks in React Native?

How can I use SectionList with hooks in React Native?

You can use the SectionList component in React Native with hooks by managing your data and state using useState and useEffect.

Can you show me a code example?

Sure! Here's a simple example:

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

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      // Fetch your data here
      const result = await fetch('your-api-url');
      const json = await result.json();
      setData(json);
    };
    fetchData();
  }, []);

  return (
    <SectionList
      sections={data}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Text>{item}</Text>}
      renderSectionHeader={({ section: { title } }) => <Text>{title}</Text>}
    />
  );
};

export default App;

What if I want to add a refresh control?

You can add a RefreshControl component to the SectionList. Here's how:

import { RefreshControl } from 'react-native';

<SectionList
  sections={data}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section: { title } }) => <Text>{title}</Text>}
  refreshControl={
    <RefreshControl
      refreshing={isRefreshing}
      onRefresh={handleRefresh}
    />
  }
/>