[Dúvida] FlatList

Sim, é possível colocar uma FlatList dentro de outra em React Native. Para fazer isso, você pode simplesmente adicionar uma FlatList como um item em outra FlatList.

Por exemplo, imagine que você tem uma lista de categorias e, para cada categoria, deseja exibir uma lista de produtos relacionados. Nesse caso, você poderia criar uma FlatList para as categorias e, dentro de cada item da lista de categorias, adicionar uma nova FlatList para exibir os produtos.

Veja um exemplo básico de como isso pode ser feito:

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

const categories = [
  { id: 1, name: 'Categoria 1', products: ['Produto 1', 'Produto 2', 'Produto 3'] },
  { id: 2, name: 'Categoria 2', products: ['Produto 4', 'Produto 5', 'Produto 6'] },
];

const App = () => {
  const [selectedCategory, setSelectedCategory] = useState(categories[0]);

  const renderItem = ({ item }) => (
    <View style={{ margin: 10 }}>
      <Text style={{ fontWeight: 'bold', fontSize: 16 }}>{item.name}</Text>
      <FlatList
        data={item.products}
        renderItem={({ item }) => (
          <View style={{ marginVertical: 5 }}>
            <Text>{item}</Text>
          </View>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <FlatList
        data={categories}
        renderItem={({ item }) => (
          <View
            style={{
              backgroundColor: selectedCategory.id === item.id ? 'yellow' : 'white',
              padding: 10,
              borderRadius: 5,
            }}
            onTouchEnd={() => setSelectedCategory(item)}
          >
            <Text>{item.name}</Text>
          </View>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
      <FlatList
        data={selectedCategory.products}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
};

export default App;