import { FlatList, ListRenderItem, Platform } from 'react-native';
import { Text, View } from 'react-native';
import { GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';

const NativeListView = () => {
  const renderItem: ListRenderItem<Item> = ({ item }) => (
    <Swipeable
      renderRightActions={() => (
        <View style={styles.swipeAction}>
          <Text>Delete</Text>
        </View>
      )}
    >
      <View style={styles.listItem}>
        <Text style={styles.itemTitle}>{item.title}</Text>
        <Text style={styles.itemSubtitle}>{item.subtitle}</Text>
      </View>
    </Swipeable>
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      scrollEventThrottle={16}
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      updateCellsBatchingPeriod={50}
    />
  );
};

const styles = {
  listItem: {
    paddingHorizontal: 16,
    paddingVertical: Platform.OS === 'ios' ? 12 : 14,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E5E5'
  },
  itemTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4
  }
};

OPTIMIZATION KEYS: Gesture-based swipe requires react-native-gesture-handler. removeClippedSubviews prevents off-screen renders. Platform-specific padding handles Android/iOS density differences. maxToRenderPerBatch caps rendering cost. Avoid inline functions in renderItem.