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>

score 2 · Accepted Answer · answered Apr 09 '18 at 06:08

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

thanks, but it not updating while scrolling or after scrolling stops! — S.Hossein Asadollahi, Apr 09 '18 at 10:26
I solved the problem based on your advice and thanks a lot for that. here is my question: https://stackoverflow.com/questions/49737287/react-native-onviewableitemschanged-not-working-while-scrolling-on-dynamic-dat — S.Hossein Asadollahi, Apr 10 '18 at 10:28

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

1 Answers1