How to Check if element is visible after scrolling for react-native? (tracking impressions and clicks)

Question

How do I Check if element is visible after scrolling for react-native? saw some examples for react, but am looking specifically for react-native. Would like to track impressions and clicks

Answer 1

ended up implementing a lib

https://www.npmjs.com/package/react-native-component-inview

import InView from 'react-native-component-inview'

const [isInView, setIsInView] = useState(false)

const checkVisible = (isVisible:boolean) => {
    if (isVisible){
      setIsInView(isVisible)
    } else {
      setIsInView(isVisible)
    }
  }

<ScrollView>
  <InView onChange={(isVisible) => this.checkVisible(isVisible)}>
    <View style={[styles.item, {backgroundColor: isInView ? 'yellow' : '#f9c2ff'}]}>
      <Text>yay</Text>
    </View>
  </InView>
</ScrollView>

References:

https://medium.com/@sanishkr/react-components-tracking-impressions-and-clicks-2fc9af1cc2c

Answer 2

React Native FlatList has two props which can be used to track impressions: onViewableItemsChanged(docs) and viewabilityConfig(docs)

They can be used as follows:

import React, { useState, useCallback } from 'react';
import { FlatList, View, Text } from 'react-native';

const MyComponent = () => {
  const [viewedItems, setViewedItems] = useState([]);

  const handleViewableItemsChanged = useCallback(({ viewableItems }) => {
    setViewedItems(viewedItems.map(item => item.key));
  }, []);

  return (
    <FlatList
      data={myData} // replace with your data
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      onViewableItemsChanged={handleViewableItemsChanged}
      viewabilityConfig={{
        itemVisiblePercentThreshold: 50 // adjust this and other parameters as needed
      }}
    />
  );
};
export default MyComponent;