import React, { useState } from "react"; import { Platform, StyleSheet, TouchableOpacity, View } from "react-native"; import { Appbar, TextInput, useTheme } from "react-native-paper"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import ColumnsList from "./lists/ColumnsList"; import CompareList from "./lists/CompareList"; import List from "./lists/List"; import MultiSelectList from "./lists/MultiSelectList"; import SectionList from "./lists/SectionList"; import SelectList from "./lists/SelectList"; const Home = () => { const { colors: { background, surface }, } = useTheme(); const [openSelector, setOpenSelector] = useState(false); const [selected, setSelected] = useState("standard"); const [insetBottom, setInsetBottom] = useState(0); const insets = useSafeAreaInsets(); const options = [ { label: "Standard List", value: "standard" }, { label: "Columns List", value: "columns" }, { label: "Sections List", value: "sections" }, { label: "Multiselect List", value: "multiselect" }, { label: "Compare List", value: "compare" }, ]; const selectedOption = options.find((item) => item.value === selected); return ( <View style={[ styles.container, { backgroundColor: background, paddingBottom: insetBottom + insets.bottom + 64, }, ]} > <Appbar.Header style={[styles.header, { height: 75 }]}> <Appbar.Content title="BigList Example" subtitle="10.000 items" /> </Appbar.Header> <TouchableOpacity style={[ styles.containerBottom, { backgroundColor: surface, bottom: insets.bottom }, ]} onPress={() => setOpenSelector(!openSelector)} onLayout={(event) => { setInsetBottom(event.height || 0); }} > <TextInput label="View mode" editable={false} onTouchStart={() => setOpenSelector(true)} value={selectedOption.label} right={ <TextInput.Icon name="chevron-down" onPress={() => setOpenSelector(!openSelector)} /> } /> </TouchableOpacity> {selected === "standard" ? ( <List /> ) : selected === "columns" ? ( <ColumnsList /> ) : selected === "sections" ? ( <SectionList /> ) : selected === "multiselect" ? ( <MultiSelectList /> ) : selected === "compare" ? ( <CompareList /> ) : null} {openSelector && ( <View style={[ StyleSheet.absoluteFill, { flex: 1, backgroundColor: surface }, ]} > <Appbar.Header style={[styles.header, { height: 75 }]}> <Appbar.Content title="View mode" subtitle="Select the list view mode example..." /> </Appbar.Header> <SelectList data={options} value={selected} onSelect={(value) => { setSelected(value); setOpenSelector(false); }} /> </View> )} </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, position: "relative", ...Platform.select({ web: { maxHeight: "100vh" }, default: {} }), }, containerBottom: { bottom: 0, elevation: 999, left: 0, position: "absolute", width: "100%", zIndex: 999, }, header: { elevation: 0, marginBottom: Platform.select({ web: 0, default: -5 }), }, }); export default Home;