title: How to determine a component active in view port of device?
body: <p>I have <strong>React Native</strong> long <strong>list view</strong> (list of cards).<br>
  How can I detect the current card is active in list view (visible on screen)?    </p>
  
  <p>To be exact, like <strong>Instagram</strong> that when you <em>pause scrolling</em> it <em>start playing</em> video <strong>automatically</strong>.  </p>
  
  <p>based on <a href="http://developer.android.com/reference/android/widget/ListView.html" rel="nofollow noreferrer">Android Documentation</a> and <a href="https://developer.android.com/reference/android/widget/AdapterView.html" rel="nofollow noreferrer">this</a> from <a href="https://stackoverflow.com/questions/17743124/how-to-know-which-list-item-is-visible-to-user?rq=1">this question</a> in Android we can use : </p>
  
  <pre><code>ListView.getFirstVisiblePosition()
  ListView.getLastVisiblePosition()
  </code></pre>
  
  <p>But in React native I couldn't find a solution.
  Here is my code:</p>
  
  <pre><code>&lt;List&gt;
      &lt;ListItem&gt;
        &lt;Card&gt;
          &lt;CardItem&gt;
              &lt;Left style={{marginLeft: 10, marginRight: 10}}&gt;
                  &lt;Thumbnail
                      circular
                      source={{uri: speaker.image}}/&gt;
                  &lt;Text&gt;
                      {speaker.first_name} {speaker.last_name}
                  &lt;/Text&gt;
                  &lt;Left&gt;
                      &lt;Text note style={{paddingLeft: 5}}&gt;
                          {speaker.company}
                      &lt;/Text&gt;
                  &lt;/Left&gt;
              &lt;/Left&gt;
          &lt;/CardItem&gt;
        &lt;/Card&gt;
     &lt;/listItem&gt;
   &lt;/list&gt;
  </code></pre>