React Native FlatList performance improvements-CodePudding

I'm reading barcodes and every barcode I read I add to an array and show in flatlist. but after 30 barcodes adding to the array getting slow. is there any solution I can do?

renderItem:

const renderItem = useCallback(
    ({item, index}) => (
      <View style={styles.ListItemContainer}>
        <Text>
          -{item} index: {index}
        </Text>
        <TouchableOpacity
          onPress={() => {
            setRemovedItem(index);
            setShowAlert(true);
          }}>
          <Text style={{fontSize: 20, fontWeight: 'bold'}}>X</Text>
        </TouchableOpacity>
      </View>
    ),
    [],
  );

FlatList component:

<FlatList
        renderItem={renderItem}
        data={barcodeArray}
        style={styles.ListContainer}
        keyboardShouldPersistTaps="handled"
        initialNumToRender={12}
        removeClippedSubviews
        windowSize={12}
        maxToRenderPerBatch={12}
      />

adding barcode:

const readBarcode = barcode => {
    setbarcodeArray([barcode, ...barcodeArray]);
    setbarcodeValue('');
    setkey(key   1);
  };

CodePudding user response：

for this solution you can use VirtualizedList instead Flatlist . In general, this should only really be used if you need more flexibility than FlatList . for more info see this

CodePudding user response：

Did you try using this: https://github.com/Flipkart/recyclerlistview library. It renders far fewer items than FlatList and then recycles them. Should be must faster and more performant than the native flatlist. If this does not work then try to use getItemLayout in flatlist if you have a fixed height of the content.