How To Build an Activity Feed App in React Native

Popular social media and community-focused apps like Facebook, X, Instagram, Reddit, and TikTok have something in common. They all possess ubiquitous features such as followers, following, interest, popularity, and location-based content delivery. You can integrate these features into web and mobile apps using activity feeds that power timelines, explore tabs, and personalized recommendations.

The following sections walk you through the tools, setup, and code to start adding activity feeds to your own project.

Tech Stack and Tools

As you work through this tutorial, you will test a real-time React Native Expo activity feed demo that runs on iOS and Android.

You’ll need the following tools.

• Download and install Android Studio: Use one of the recent releases of Android Studio to test the demo with an emulator or an attached/network Android device.
• Install Xcode: You can run the demo with Xcode 15 or later on an actual iOS device or using a simulator.
• Terminal: To add project dependencies, use a command-line tool that comes with your machine or one integrated with an IDE like Cursor.

If you are already familiar with the concept of an activity feed, feel free to skip to Build Your First Activity Stream in React Native.

Activity Feed Overview

An activity feed comprises an app's social features. It can be a collection of several activities in a specific category of your app.

For example, on the X platform, all posts that appear on a user's timeline constitute a timeline feed. Users' actions on a post, like sharing, liking, and bookmarking, are called activities. In general, all activities appear in your feed.

The following popular social features of community and forum platforms are all feeds.

• Following: This lets users see content from people they follow.
• For-You: A for-you feed can include any content suggested to users based on location, interest, etc.
• Explore: You can build an explore feature into an app to display curated content to users based on past searches and other factors.

Why Use Activity Feeds in Your App?

Activity feeds are a must-have social feature of group-based apps and discussion forums. They keep users engaged and encourage them to return.

Countless apps and services use activity feeds as a core in-app feature. The most popular ones include TikTok, Facebook, Reddit, Instagram, X, and GitHub's desktop and mobile apps.

• TikTok’s endless scrolling feeds: Seeing the best moments and an endless list of videos from the people they follow helps to retain users.
• Instagram and Facebook: Engaging users through likes and comments facilitates a sense of belonging.
• Personalization: Personalized and curated content that matters to users keeps them coming back.
• Real-Time Pushes: Getting news updates, activity notifications, and fresh content from the people users follow helps to increase engagement.
• Share your best moments in life: Using activity feeds to let users share their memories builds a strong sense of connection and loyalty.

Build Your First Activity Stream in React Native

The feed API is available on several platforms for client- and server-side technologies.

To start with the React Native client SDK, you should sign up for a Stream dashboard account and create a new feeds app from your dashboard. Set the Feeds Data Storage Location to US Ohio. The other feed data storage locations in the image below will be available soon.

Once you create a new feed app from your dashboard, you can use your API key and secret to generate a user token to make feed API calls.

React Native Feed SDK Installation and Quick Start

Begin by installing the React Native Feed SDK and its mandatory dependencies with 'npm' or 'yarn'.

1
2
3
4
5
6
7
8
9
10
11
npm install @stream-io/feeds-react-native-sdk

# or using yarn

yarn add @stream-io/feeds-react-native-sdk

npm install @react-native-community/netinfo

# or using yarn

yarn add @react-native-community/netinfo

Make Your First Feed API Call

To call the feed API endpoints, you should perform the following steps:

1. Import the SDK and create a new feed client.
2. Use the client to create a new feed. If the feed already exists, the client can be used to retrieve its data.
3. Finally, add a new activity to the feed as illustrated in this sample code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { FeedsClient } from "@stream-io/feeds-react-native-sdk";

const client = new FeedsClient("<API key>");
await client.connectUser({ id: "john" }, "<user token>");

// Create a feed (or get its data if exists)
const feed = client.feed("user", "john");
// Subscribe to WebSocket events for state updates
await feed.getOrCreate({ watch: true });

// Add activity
await feed.addActivity({
  text: "Hello, Stream Feeds!",
  type: "post",
});

Create a Basic Social Media Feed

Using the steps outlined in the section above to make an API call, you can create a basic social media feed with this sample code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Create a timeline feed
const timeline = client.feed("timeline", "john");
await timeline.getOrCreate();

// Add a reaction to activity
await client.addReaction({
  activity_id: "activity_123",
  type: "like",
});

// Add a comment to activity
await client.addComment({
  object_id: "activity_123",
  object_type: "activity",
  comment: "Great post!",
});

// Add a reaction to comment
await client.addCommentReaction({
  comment_id: "comment_123",
  type: "love",
});

This example creates a social media timeline feed and allows users to add reactions and comments, as well as react to comments.

Create a Notification Feed

Aside from the above simple social media feed example, the API supports the creation of notification feeds to inform users about timely updates within your app.

1
2
3
4
5
6
7
8
// Create a notification feed
const notifications = client.feed("notification", "john");
await notifications.getOrCreate();

// Mark notifications as read
await notifications.markActivity({
  mark_all_read: true,
});

This example illustrates a notification feed that is marked as read. Read the feed docs to discover advanced use cases and features you can build into your app.

TikTok-Like Activity Feed Sample App Demo

These device screens represent the sample activity feed demo, similar to TikTok. This sample app aims to demonstrate the @stream-io/feeds-react-native-sdk capabilities built using Expo. It consists of user authentication, timeline feed, an explore feature, video upload, user profile, and more.

With minimal configuration effort, you can run the app on Android or iOS devices or the emulator/simulator. Let's do that in the sections below.

Clone the Sample App, Install Expo, and Dependencies

Use the following commands to clone the app's repo and add the React Native Expo package as a global dependency on your machine.

1
2
git clone https://github.com/GetStream/stream-feeds-js.git
npm install -g expo

In the root directory of the cloned project, you should:

1
2
yarn install
yarn build:libs

These commands will fetch and add the required project dependencies and build all libraries for the project.

Next, navigate to the packages/feeds-client directory of the project and run it in --watch mode:

cd packages/feeds-client && yarn start

Lastly, launch a new terminal instance and navigate to the sample-apps/react-native/ExpoTikTokApp directory and yarn install:

cd sample-apps/react-native/ExpoTikTokApp && yarn install

Now that you have all the necessary dependencies installed, it's time to set up and run the app on Android and iOS.

Configure to Run on Android

There are two main configurations for Android: setting up your environment and registering your computer’s specifications in Android Studio. To set up your environment, run the following commands in the Terminal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Install Node and Watchman
brew install node
brew install watchman

brew install --cask zulu@17

# Get path to where cask was installed to find the JDK installer
brew info --cask zulu@17

# ==> zulu@17: <version number>
# https://www.azul.com/downloads/
# Installed
# /opt/homebrew/Caskroom/zulu@17/<version number> (185.8MB) (note that the path is /usr/local/Caskroom on non-Apple Silicon Macs)
# Installed using the formulae.brew.sh API on 2024-06-06 at 10:00:00

# Navigate to the folder. Double-Click to Install Azul Zulu JDK 17.pkg package to install the JDK.
open /opt/homebrew/Caskroom/zulu@17/<version number> # or /usr/local/Caskroom/zulu@17/<version number>

# Export the zulu-17 SDK. On macOS, you can also add the export command to your **.zprofile** or **.zshrc*** file. 
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

We install Node and Watchman to monitor the project’s file system for changes. Next, install the zuru-17 SDK for Android and export it to your operating system’s .zprofile or .zshrc file on the Mac. It may be different on a Windows or Linux PC.

The information above may change, so visit the official React Native docs for a step-by-step guide.

Launch Android Studio and configure the following if you already have it installed.

On the Android Studio welcome screen, click More Actions and select Virtual Device Manager. The next screen that appears allows you to register a physical Android device via your network or USB cable. Alternatively, you can click the plus (+) button on the Virtual Device Manager screen to download an Android emulator to run on.

Move the welcome screen again, click More Actions, and select SDK Manager. At this point, the Android SDK configuration depends on your machine and operating system. There are two categories, SDK Platforms and SDK Tools. Check out the official React Native guide to set it according to your device's specifications.

The example SDK Platforms and SDK Tools settings below are for an Apple Silicon Mac, M4. However, yours may require different settings.

Configure to Run on iOS

Unlike Android, setting up the app for iOS requires minimal effort. You should check the option to install iOS simulators during your Xcode installation. You can also attach an actual iOS device to Xcode and run it. If you encounter a Cocoapods error when running the app on iOS, try fixing it with an AI model like Claude 4 Sonnet in Cursor or using an agentic CLI coding tool.

Test the Android and iOS Demo with Simulators/Devices

After performing all the above configurations for iOS and Android, the app is ready to be tested. To test it on iOS, run the command:

yarn run ios -d

Similarly, you can test the app on Android with:

yarn run android -d

Congratulations 🎉🥳👏! You now have a fully featured and functional social feeds app similar to TikTok with notable features like endless content scrolling, video exploration from the people you follow, and more.

What’s Next

This article showed you how to quickly add activity feeds to a social community app and build features such as explore, for-you, follow/unfollow, share, like, and bookmark. It introduced you to the Stream Activity Feed API, SDK, and all of its available platforms. And finally, you configured and tested a sample React Native activity feed demo app on Android and iOS.

To continue from this article and build a scalable social app using production-ready feed APIs and SDKs, visit the feed docs. To create an activity feed app for a use case like the X platform, check out a functional React sample on GitHub.