How to determine a component active in view port of device?

Question

I have React Native long list view (list of cards).
How can I detect the current card is active in list view (visible on screen)?

To be exact, like Instagram that when you pause scrolling it start playing video automatically.

based on Android Documentation and this from this question in Android we can use :

ListView.getFirstVisiblePosition()
ListView.getLastVisiblePosition()

But in React native I couldn't find a solution. Here is my code:

<List>
    <ListItem>
      <Card>
        <CardItem>
            <Left style={{marginLeft: 10, marginRight: 10}}>
                <Thumbnail
                    circular
                    source={{uri: speaker.image}}/>
                <Text>
                    {speaker.first_name} {speaker.last_name}
                </Text>
                <Left>
                    <Text note style={{paddingLeft: 5}}>
                        {speaker.company}
                    </Text>
                </Left>
            </Left>
        </CardItem>
      </Card>
   </listItem>
 </list>

Answer 1

You can use Flatlist instead of listview here, it provides onViewableItemsChanged to get current visible item, see below code:

constructor(props) {
        super(props);
        this.state = {
            arrData: [],
        }
        this.handleViewableItemsChanged = this.handleViewableItemsChanged.bind(this)
        this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 50}
    }

    handleViewableItemsChanged(info) {
        console.log(info)
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.arrData}
                    horizontal={true}
                    pagingEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    onViewableItemsChanged={this.handleViewableItemsChanged}
                    viewabilityConfig={this.viewabilityConfig}

                    renderItem={({item}) =>
                        // Your display Items
                    }
                />
            </View>
        );
    }

You can refer the URL for more details: https://facebook.github.io/react-native/docs/flatlist.html