flatlist-onViewableItemsChanged.jsx

import React from 'react';
import {
  Text,
  TouchableOpacity,
  Image,
  View,
  FlatList,
  Dimensions,
  StatusBar,
} from 'react-native';

const { width, height } = Dimensions.get('window');

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeIndex: 0,
      data: [],
      viewableItemIndices: [],
    };
    
    this.files = [
      'https://3.bp.blogspot.com/-FoOhlH0Mo_g/Wn1V8CYLKrI/AAAAAAABKGg/EiOfzgTZv0YLjeeoe-CVcqNGGfQxJqcSgCLcBGAs/s400/hyoujou_shinda_me_woman.png',
      'https://4.bp.blogspot.com/-FEuUOcvDUv8/VSufwYbG3HI/AAAAAAAAtB8/gZDriMEhAvw/s800/yomogimushi.png',
      'https://3.bp.blogspot.com/-1E_oghJXSG8/VcMlSPiZ8XI/AAAAAAAAwYs/z5M1depYh2E/s800/fujoshi_otaku.png',
      'https://1.bp.blogspot.com/-rMe023D0o1U/WtRy7kBx4UI/AAAAAAABLis/MY6ZB67IWIwiKp4EyUyAHFXWgco_0GYKQCLcBGAs/s800/figure_mizukakeron.png',
      'https://3.bp.blogspot.com/-73PkzQHqRFQ/UOFJv5TiOII/AAAAAAAAKBg/cVlK6rrWjNg/s1600/bunbougu_cutter.png',
      'https://1.bp.blogspot.com/-WnbYeT2MBcA/VJ6XzX9SleI/AAAAAAAAqQY/jwqiJve8HEg/s800/whiteboy1_1smile.png',
      'https://4.bp.blogspot.com/-O1jEfWR65V8/WtRy0pBzSMI/AAAAAAABLh8/NrNo4F1hgFcKJYrJ5pmHJBz24SEjD1dnACLcBGAs/s800/character_cthulhu_hastur.png',
      'https://2.bp.blogspot.com/-RoikxFjzfMo/WtRzRE6uuqI/AAAAAAABLlI/iH0eSngb4_ofWKmypbcAazql_pTvXxWTQCLcBGAs/s800/music_cowbell.png',
    ]
  }

  componentDidMount() {
    this.getFiles();
  }
  
  getFiles = () => {
    this.setState({
      data:this.state.data.concat(this.files.slice(5).map((file,index) => ({
        id:this.state.data.length + index,
        file_url:file
      })))
    });
    
    for (var i = this.files.length - 1; i >= 0; i--){
      var rand = Math.floor(Math.random() * (i + 1));
      [this.files[i], this.files[rand]] = [this.files[rand], this.files[i]];
    }
  }

  onIndexChanged = async (index) => {
    await this.setState({
      activeIndex: index,
    });

    if (index + 1 === this.state.data.length) {
      this.getFiles();
    }
  }

  onViewableItemsChanged = ({ viewableItems, changed }) => {
    if(viewableItems.length){
      const { index } = viewableItems[0];
      this.onIndexChanged(index);

      this.setState({ viewableItemIndices: viewableItems.map(item => item.index) });
    }
  }

  viewabilityConfig = {
    minimumViewTime: 1,
    viewAreaCoveragePercentThreshold: 0,
  }

  render() {
    const metrics = {
      screenWidth: width < height ? width : height,
      screenHeight: width < height ? height : width,
    };

    return (
      <FlatList
        pagingEnabled
        style={{ flex: 1 }}
        data={this.state.data}
        renderItem={({ item, index }) => {
          if (this.state.viewableItemIndices.indexOf(index) < 0){
            return (
              <View style={{flex:1,height: metrics.screenHeight}} />
            )
          }
          
          return (
            <View style={{flex: 1, width: metrics.screenWidth, height: metrics.screenHeight, justifyContent: 'center', alignItems: 'center'}}>
              <Image source={{uri:item.file_url}} style={{width:300,height:300}} resizeMode="contain" />
              <Text>index:{item.id}</Text>
              <Text>{JSON.stringify(this.state.viewableItemIndices)}</Text>
            </View>
          )
        }}
        keyExtractor={(item, index) => `data-${item.id}`}
        viewabilityConfig={this.viewabilityConfig}
        onViewableItemsChanged={this.onViewableItemsChanged}
      />
    );
  }
}