/* eslint-disable no-shadow */ import React from "react"; import { FlatList, KeyboardAvoidingView, Platform, SafeAreaView, StyleSheet, View, } from "react-native"; import { List, Subheading } from "react-native-paper"; import { StatusBar } from "expo-status-bar"; import BigList from "react-native-big-list"; import data from "../data/data.json"; import Block from "./components/Block"; const ITEM_HEIGHT = 50; export default function CompareList() { const renderItem = ({ item }) => { return ( <List.Item title={item.id + " - " + item.title} description={item.description} style={styles.item} left={(props) => <List.Icon {...props} icon="account" />} /> ); }; const renderEmpty = () => <List.Item title="No items" />; const renderBigHeader = () => ( <List.Item title="BigList" description="react-native-big-list" style={styles.header} /> ); const renderFlatHeader = () => ( <List.Item title="FlatList" description="react-native" style={styles.header} /> ); const renderFooter = () => ( <Block> <Subheading>No more items available...</Subheading> </Block> ); return ( <SafeAreaView style={styles.container}> <KeyboardAvoidingView style={styles.container}> <View style={styles.compare}> <BigList style={[ styles.container, Platform.select({ web: { maxHeight: "100vh" }, default: {} }), ]} data={data} renderItem={renderItem} getItemLayout={(data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index, })} ListHeaderComponent={renderBigHeader} ListFooterComponent={renderFooter} ListEmptyComponent={renderEmpty} headerHeight={100} // Default 0, need to specify the header height footerHeight={100} // Default 0, need to specify the footer height /> <FlatList style={[ styles.container, Platform.select({ web: { maxHeight: "100vh" }, default: {} }), ]} data={data} renderItem={renderItem} getItemLayout={(data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index, })} // Replaceable with `itemHeight={ITEM_HEIGHT}` ListHeaderComponent={renderFlatHeader} // Replaceable with `renderHeader` ListFooterComponent={renderFooter} // Replaceable with `renderFooter` ListEmptyComponent={renderEmpty} // Replaceable with `renderEmpty` keyExtractor={(item) => String(item.id)} // Removable /> </View> <StatusBar style="auto" /> </KeyboardAvoidingView> </SafeAreaView> ); } const styles = StyleSheet.create({ compare: { flex: 1, flexDirection: "row", }, container: { flex: 1, }, header: { flex: 1, paddingTop: 20, }, item: { flex: 1, maxHeight: ITEM_HEIGHT, }, });