onViewableItemsChanged не работает в OptimizedFlatList

Question

onViewableItemsChanged нормально работает в FlatList, но из-за многих проблем с производительностью и памятью я использовал react-native-optimized-flatlist. Но onViewableItemsChanged не работает в react-native-optimized-flatlist. Есть идеи?

Я придумала это окончательное решение. Но не в состоянии сделать автозапуск. Нужны идеи по этому поводу. Пожалуйста, помогите

import React from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import YouTube from 'react-native-youtube';
import { OptimizedFlatList } from 'react-native-optimized-flatlist'
import VideoPlayer from 'react-native-video-player';

const list = [
  {
    'type': 'Normal'
  },
  {
    'type': 'YouTube'
  },
  {
    'type': 'Normal'
  },
  {
    'type': 'Normal'
  },
  {
    'type': 'YouTube'
  },
  {
    'type': 'Normal'
  },
  {
    'type': 'Normal'
  },
  {
    'type': 'Normal'
  },
];

export default class App extends React.PureComponent {
  constructor() {
    super();
    this.player = [];

    this.state = {
      video: { width: undefined, height: undefined, duration: undefined },
      thumbnailUrl: undefined,
      videoUrl: undefined,
    };
  }

  keyExtractor = (item, index) => index.toString()

  renderItem = ({ item, index }) => (
    <>
      {item.type != 'YouTube' ?
        <>
          <View style={styles.videos}>
            <VideoPlayer
              // autoplay
              // pauseOnPress
              video={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', type: 'mp4' }}
              resizeMode={'cover'}
              ref={r => this.player[index] = r}
            />
          </View>
        </>
        :
        <>
          <View style={{ marginTop: 50 }}>
            <YouTube
              apiKey="YOUR_API_KEY"
              videoId="3NQRhE772b0"
              style={{...styles.videos,...styles.videos1}}
            />
          </View>
        </>
      }
    </>
  )

  onViewableItemsChanged = async ({ viewableItems }) => {
    if (viewableItems != '' && viewableItems != null) {
      var indexvalue = viewableItems[0]['index'];
      indexvalue++;
      if (indexvalue != 1) {
        if (!this.player[indexvalue].state.isPlaying) {
          this.player[indexvalue].pause();
        } else {
          this.player[indexvalue].resume();
        }
      }
    }
  }


  render() {
    return (
      <>
        <SafeAreaView style={{ flex: 1 }}>
          <OptimizedFlatList
            keyExtractor={this.keyExtractor}
            data={list}
            renderItem={this.renderItem}
            removeClippedSubviews={true}
            onViewableItemsChanged={this.onViewableItemsChanged}
          />
        </SafeAreaView>
      </>
    );
  }
}


const styles = StyleSheet.create({
  videos: {
    width: "95%",
    backgroundColor: '#ccc',
    borderRadius: 10,
    overflow: 'hidden',
    margin: 10,
    marginBottom: 20,
    marginTop: 20
  },
  videos1: {
    height: 250
  }
});