Как я могу выбрать несколько элементов в плоском списке без сброса положения прокрутки в реагирующем?

Question

Я создаю реактивное приложение с использованием хуков, но я в основном тестирую в android.

Моя проблема: у меня плоский список, в котором я показываю некоторые элементы из средства выбора документов и когда я выбираю один из них, который не находится сверху, список перерисовывается и прокручивается вверх.

Что я хочу: выбрать элемент и удерживать положение полосы прокрутки.

Состояния компонентов:

const [files, setFiles] = useState([]);
const [selectedFiles, setSelectedFiles] = useState([]);
const [isEditEnabled, setIsEditEnabled] = useState(false);

Состояния:

• файлы -> файлы из средства выбора
• selectedFiles -> файлы для выделения
• isEditEnabled -> когда true, я могу выбрать одним нажатием

Вспомогательные функции:

const selectFile = file => {
  const isInSelectedFiles = selectedFiles.findIndex(
    selectedFile => selectedFile.name === file.name,
  );
  if (isInSelectedFiles === -1) {
    setSelectedFiles(oldSelectedFiles => oldSelectedFiles.concat(file));
  }
};

const handeThumbnailPress = file => {
  if (isEditEnabled) {
    selectFile(file);
  }
};

const handleThumbnailLongPress = file => {
  selectFile(file);
};

Основной код:

const FilesList = () => {
    return (
      <FlatList
        ref={flatListRef}
        onScroll={event => {
          scrollPosition.current = event.nativeEvent.contentOffset.y;
        }}
        scrollEventThrottle={16}
        data={files}
        extraData={selectedFiles}
        renderItem={({ item: file }) => {
          const isSelected =
            selectedFiles.findIndex(
              selectedFile => selectedFile.name === file.name,
            ) > -1;
          return (
            <DocumentThumbnail
              data={file}
              selected={isSelected}
              onPress={() => handeThumbnailPress(file)}
              onLongPress={() => handleThumbnailLongPress(file)}
            />
          );
        }}
        keyExtractor={(file, index) => `${file.name}-${index}`}
        onContentSizeChange={handleContentSizeChange}
      />
    );
  };

  return (
    <View style={styles.root}>
      <Grid style={styles.alignCenter}>
        <Row>{!files.length ? <Text>Item List!</Text> : <FilesList />}</Row>
      </Grid>
      <FloatingAction
        actions={floatingActions}
        onPressItem={handleFloatingActions}
      />
    </View>
  );

Изображение, показывающее список файлов и прокрутки: