title: React Native "onViewableItemsChanged" not working while scrolling on dynamic data
body: <p>I have a React Native FlatList.
  base on <a href="https://facebook.github.io/react-native/docs/flatlist.html#onviewableitemschanged" rel="nofollow noreferrer">Documentation</a> I used <strong>onViewableItemsChanged</strong> for getting the current showing item on the screen. but while scrolling or when scrolling stops nothing happens and I can't get the current Id.
  How Can I use it in correct way?</p>
  
  <pre><code>export default class TimeLine extends Component {
  constructor(props) {
      super(props);
      this.renderTimeline = this.renderTimeline.bind(this);
      this.state = {
          timeline: [],
      };
      this.handleViewableItemsChanged = this.handleViewableItemsChanged.bind(this);
      this.viewabilityConfig = {
          itemVisiblePercentThreshold: 50,
      };
  }
  ...
  renderTimelineList(timeline_data) {
  
  
      return (
  
          &lt;Card key={timeline_data.unique_id}&gt;
              &lt;CardItem style={styles.header}&gt;
                  &lt;Left&gt;
                      &lt;Icon type="MaterialIcons" name={this.timelineIcon(timeline_data.type)}/&gt;
                      &lt;Body&gt;
                      &lt;Text style={styles.header_title}&gt;{timeline_data.title}&lt;/Text&gt;
  
                      &lt;/Body&gt;
                  &lt;/Left&gt;
              &lt;/CardItem&gt;
  
              &lt;CardItem&gt;
                  {this.renderTimeline(timeline_data)}
              &lt;/CardItem&gt;
  
              &lt;CardItem&gt;
                  &lt;Left&gt;
                      &lt;Icon small name="time" style={styles.small_font}/&gt;
                      &lt;Text note style={styles.small_font}&gt;{timeline_data.release_date}&lt;/Text&gt;
                  &lt;/Left&gt;
                  &lt;Right&gt;
                      &lt;Text note style={styles.small_font}&gt;{timeline_data.duration}&lt;/Text&gt;
                  &lt;/Right&gt;
              &lt;/CardItem&gt;
          &lt;/Card&gt;
      );
  
  
  }
  render() {
      return (
          &lt;Container&gt;
              &lt;Content&gt;
                  &lt;FlatList
                      key={this.state.key}
                      onViewableItemsChanged={this.handleViewableItemsChanged}
                      viewabilityConfig={this.viewabilityConfig}
                      data={this.state.timeline}
                      renderItem={({item}) =&gt; this.renderTimelineList(item)}
                  /&gt;
              &lt;/Content&gt;
          &lt;/Container&gt;
      );
  };
  }
  </code></pre>