Published on

14 - Implementing an Activity Feed in a TikTok Clone | React Native & Supabase

Introduction

In this article, we will explore the process of implementing an activity feed in a TikTok clone using React Native and Supabase. The activity feed will consist of two main sections: followers and activities. Users will be able to view who has followed them and see recent activities such as likes and comments on their posts.

Setting Up the Inbox

We start by navigating to the Inbox component, where we intend to implement these features. The inbox will include sections for chat, activities, and followers.

Fetching Followers

To begin with, we will display the list of followers using the data from our Supabase provider. We'll fetch followers, which consist of user IDs representing those who have followed the current user. To visualize the followers, we will create a new component called Followers.

Here’s how we can fetch followers and display them on the screen:

const followers = useUserFollowers(); // Fetch followers

Next, we set up a touchable element to navigate to the followers list when clicked. The layout will consist of an icon and a text label indicating "New Followers".

<TouchableOpacity onPress=(() => router.push('/followers'))>
    <View style=({ backgroundColor: 'blue', padding: 10 )}>
        <Text style=({ color: 'white' )}>New Followers</Text>
    </View>
</TouchableOpacity>

Creating the Followers Screen

Now that we have the functionality to view new followers, we can create the Followers component that will display the list of followers.

Here's how our Followers component might look:

import React from 'react';
import ( FlatList, View, Text ) from 'react-native';

const Followers = () => (
    const followersData = // fetch followers data from Supabase
    return (
        <FlatList
            data={followersData)
            renderItem=(({ item )) => (
                <TouchableOpacity onPress=(() => navigateToProfile(item.userID))>
                    <Text>(item.username)</Text>
                </TouchableOpacity>
            )}
        />
    );
};

Implementing Activities

Next, we’ll implement the activities section, which will include likes and comments. We create an Activities page that fetches data from Supabase. We'll display who liked the posts and who commented on them.

Fetching Likes and Comments

To retrieve likes and comments, we will create functions to pull that data based on the current user’s videos.

const likes = await getLikes(videoID); // Get likes for each video
const comments = await getComments(videoID); // Get comments on videos

Updating the Activity Component

The activity component will display a list of activities that the user performed. The layout will be similar to that of the followers list with the addition of timestamps for each activity.

const Activities = () => (
    const activityData = // fetch likes and comments data
    return (
        <FlatList
            data={activityData)
            renderItem=(({ item )) => (
                <Text>(item.username) liked your video (item.videoTitle) at (item.createdAt)</Text>
            )}
        />
    );
};

Adding Follow Functionality

If a user visits another user's profile, we want to provide a follow button if they are not already following them. We’ll check the current user's following list and create appropriate actions for following or unfollowing a user.

const isFollowing = checkFollowStatus(currentUser, profileUser);
if (!isFollowing) (
    return (
        <TouchableOpacity onPress={() => followUser(profileUser.id))>
            <Text>Follow</Text>
        </TouchableOpacity>
    );
}

This functionality allows users to easily see their followers and activities in a clear and dynamic feed, enhancing user interaction on the platform.

Conclusion

By following these steps, we have successfully implemented an activity feed that showcases new followers and user activities such as likes and comments. This features provide a richer user experience in our TikTok clone, making it more interactive and engaging.

Keyword

  • Activity Feed
  • TikTok Clone
  • React Native
  • Supabase
  • Followers
  • Likes
  • Comments
  • Follow Functionality

FAQ

Q1: What components were created in the activity feed?
A1: We created components for followers and activities along with respective screens for visualization.

Q2: How are followers and activities fetched?
A2: Followers and activities are fetched from Supabase using API calls that retrieve user-related data.

Q3: What functionality is added related to user profiles?
A3: A follow/unfollow button was added to user profiles to manage following actions easily.

Q4: How can users see who interacted with their posts?
A4: Users can view the likes and comments on their posts through the activities section of the inbox.

Read More