How to find the number of views of the react native page?

Question

I'm making an app. I want to find the number of views of a forum application and posts shared in this application and send them to the firebase database? What path should I follow?

Answer 1

There are 2 ways to count post views.

Inside Post Feed List

When post posts are rendered inside scrollable components like ScrollView or FlatList, Use components like - https://www.npmjs.com/package/@skele/components .

This is a higher-order component that tracks if the child component is inside viewport then you can use this information to update the post view counts.

import { Viewport } from "@skele/components";
import { FlatList, View, Text } from "react-native";

const ViewportAwareView = Viewport.Aware(View);

function HomeScreen() {
  const onViewportEnter = async () => {
    //  Logic to increase view counts here
  };

  const onViewportLeave = async () => {};

  const renderItem = ({ item }) => {
    return (
      <ViewportAwareView
        onViewportEnter={onViewportEnter}
        onViewportLeave={onViewportLeave}
        retainOnceInViewport={false}
      >
        <Text> .... </Text>
      </ViewportAwareView>
    );
  };

  return (
    <Viewport.Tracker>
      <FlatList scrollEventThrottle={16} renderItem={renderItem} />
    </Viewport.Tracker>
  );
}

Count View inside Post Detail Screen

When users visit post screen, increase post view count when screen mounted.

function postDetailsScreen() {
  useEffect(() => {
    // Logic to increase post view counts
  }, []);

  return <View> Post details here... </View>;
}