RecycleList

test.tsx

import React from "react";
import { Dimensions, StyleSheet, View, Text } from "react-native";
import { RecyclerListView, DataProvider, LayoutProvider } from "recyclerlistview";

// Screen width
const { width } = Dimensions.get("window");

// Define the data provider with a rowHasChanged method to optimize the list rendering
const dataProvider = new DataProvider((r1, r2) => r1 !== r2);

// Sample data
const sampleData = Array.from({ length: 50 }).map((_, index) => ({
  type: "NORMAL",
  item: `Item ${index + 1}`,
}));

export default function CardContent() {
  // State to manage the data provider with the initial data
  const [data, setData] = React.useState(dataProvider.cloneWithRows(sampleData));

  // Define the layout provider based on the type of data (NORMAL in this case)
  const layoutProvider = new LayoutProvider(
    (index) => data.getDataForIndex(index).type,
    (type, dim) => {
      switch (type) {
        case "NORMAL":
          dim.width = width;
          dim.height = 80; // Set the height of each item
          break;
        default:
          dim.width = 0;
          dim.height = 0;
          break;
      }
    }
  );

  // Render each item based on the type
  const rowRenderer = (type: any, data: any) => {
    switch (type) {
      case "NORMAL":
        return (
          <View style={styles.itemContainer}>
            <Text style={styles.itemText}>{data.item}</Text>
          </View>
        );
      default:
        return null;
    }
  };

  return (
    <View style={styles.container}>
      <RecyclerListView layoutProvider={layoutProvider} dataProvider={data} rowRenderer={rowRenderer} />
    </View>
  );
}

// Styles for the container and each item
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  itemContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#fff",
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
  },
  itemText: {
    fontSize: 18,
    color: "#333",
  },
});