DEV Community: Tsabary

Replyke vs Disqus: Complete Guide to Website Commenting Systems in 2025

Tsabary — Tue, 01 Jul 2025 13:31:44 +0000

The battle for user engagement on websites has never been more critical. While social media platforms capture attention, website commenting systems remain the backbone of community building and content discussion.

In this article, I will compare two distinct approaches: Disqus, the established player with millions of installations, and Replyke, the developer-focused newcomer promising modern API-first architecture with zero ads.

Website Commenting System Overview

Comment sections drive 60% more engagement than static content alone, according to recent studies. Yet the landscape has dramatically shifted. Users expect Instagram-style threading, real-time notifications, and seamless mobile experiences—features that traditional commenting systems struggle to provide.

The fundamental question facing developers today: Should you embed a third-party widget that forces users into separate account systems, or integrate social features that work seamlessly with your existing users? This choice impacts everything from page load speeds to user experience continuity.

Disqus Alternative Analysis: Replyke's Modern Approach

Replyke positions itself as the next-generation commenting platform—an open-source, API-first solution that integrates social features directly into applications while maintaining the simplicity of drop-in widgets.

The Open-Source Philosophy

Unlike Disqus's proprietary system, Replyke v5 is fully open-source under Apache 2.0 license. As explained in the licensing announcement:

"What started as a simple comment section grew into a fullstack framework for building social products. Making it open-source means developers can truly own their community features."

This philosophy extends beyond code access. While Replyke offers hosted solutions like Disqus, developers can download their data anytime, self-host if desired, or build custom solutions using the open-source codebase.

Drop-in Integration with Native User Experience

Replyke v5 offers the best of both worlds: drop-in simplicity with native user integration. The current integration is straightforward:

import { SocialCommentSection } from "@replyke/comments-social-react-js";

<ReplykeProvider projectId={PROJECT_ID} signedToken={USER_SIGNE_JWT}>
    <SocialCommentSection foreignId={ENTITY_ID} />
</ReplykeProvider>

The crucial difference: your existing users can comment immediately without creating separate Disqus accounts. Comments feel like a native part of your application, not an external service.

Comment Widget Comparison: Setup and Integration

Disqus: The Separate Account Problem
Disqus built its reputation on simplicity, but at a cost. While setup takes minutes, users must create Disqus accounts to participate. This creates friction that many developers overlook:

<div id="disqus_thread"></div>  
<script>  
  var disqus_config = function () {  
    this.page.url = PAGE_URL;  
    this.page.identifier = PAGE_IDENTIFIER;  
  };  
</script>

Your users see "Login with Disqus" buttons, breaking the native experience. Comment data lives exclusively on Disqus servers with limited export options.

Replyke: Native Integration Without Complexity

Replyke v5 eliminates the account friction problem. Users comment with their existing application accounts, maintaining seamless user experience. Aside from JWT signing, no server-side code required for basic implementation at all.

Reddit user discussions reveal this critical difference. In r/Gameinformer
one developer highlighted the user experience issue:

"I always want to engage in discussion on websites but I don't want to agree to all the terms of Disqus to use it. An internal comment system would be really useful."

In r/webdev, another developer noted:

"I used Disqus until I realized they come with massive ads on the free version. Looking for something free without ads."

Website Comments Solution: Features Face-Off

Threading and Engagement

Replyke's Social Media Approach:

Upvote/downvote system with automatic user reputation scoring
@mentions with real-time notifications
Nested threading with visual indicators
Emoji reactions and GIF support
Zero advertisements
comments feel native to your application. Full customization options

Disqus's Traditional Threading:

Hierarchical reply structure
Like/dislike buttons with limited functionality
Basic mention system
Ad-supported free tier with promotional content
Separate user ecosystem

The Advertisement-Free Advantage

This represents a fundamental user experience difference. Disqus displays ads in comment sections, making the integration feel like a third-party service. Replyke maintains a completely ad-free experience, ensuring comments blend seamlessly with your application design.

Moderation Tools

Replyke's Dashboard:

Built-in reporting system
Moderation dashboard
User role management

Disqus's AI Moderation:

Automated spam detection
Pre-moderation options
Bulk moderation tools
Advanced filtering

Comment Section Tools: Pricing Breakdown

Replyke Pricing Structure - usage-based model:

Free: 10k API calls, 1k comments, 1 seat
Hobby ($14/month): 100k API calls, 5k comments, 2 seats
Team ($49/month): 1M API calls, 100k comments, 10 seats
Grow ($149/month): 20M API calls, 800k comments, 35 seats

Disqus's pricing structure - pageviews model:

Basic (Free): Ad-supported with promotional content
Plus ($18/month): Ad-free, up to 350k monthly pageviews
Pro ($125/month): Advanced features, up to 2.5M pageviews
Business: Custom enterprise pricing

The key difference: Replyke eliminates ads entirely across all plans, while Disqus requires paid plans to remove advertisements.

Performance Comparison

Page load speed significantly impacts user experience. Multiple sources indicate Disqus's performance challenges:

Disqus adds 2-4 seconds to page load times
Third-party scripts can be blocked by ad blockers
GDPR compliance requires additional cookie consent
Advertisement loading creates additional network requests

Replyke loads comments natively within your app using lightweight React components and direct API access, avoiding slow third-party scripts and unnecessary bloat.

Mobile Responsiveness

Both platforms support mobile devices with different approaches:

Disqus: Responsive embed with advertisement considerations Replyke: Native React Native components for mobile apps, responsive web components
For native mobile applications, Replyke's React Native library provides superior integration without advertisement concerns.

Beyond Comments: The Full Social Platform - Replyke's Comprehensive Social Features

Comments represent just the beginning of Replyke's capabilities:

Feed Aggregation:

Create personalized content feeds.
Sort and filter content by engagement.
Time-based feed organization.

User-Generated Collections

Allow users to create collections to save their favorite content.
Collections can be nested infinitely, allowing users to organize content in a deeply structured and intuitive way.

Rich User Profiles:

Customizable user profiles with avatars and bios (data management - dev have full UI control).
Automatic user community reputation tracking.
Social connections between users (follows)

Advanced Permissions:

Role-based access control
Custom user permissions
Moderation hierarchy management

Replyke's Developer SDK Access:

Node.js SDK:

Server-side data access
Custom backend integrations

JavaScript SDK:

Client-side data manipulation
Custom UI implementations

This SDK access means developers can build custom interfaces, create unique user experiences, or integrate Replyke data into existing systems—capabilities unavailable with Disqus's closed ecosystem.

The Verdict - Which Website Discussion Platform Should You Choose?

Choose Disqus When:

You need the quickest possible setup
Your users can accept creating separate accounts
Advertisement presence is acceptable
You don't require advanced social features
Your team prefers fully managed solutions

Choose Replyke When:

You want seamless integration with existing users
Advertisement-free experience is essential
You appreciate advanced social features beyond comments
Data ownership and flexibility matter
You're building community-focused applications
You want SDK access for custom implementations
You prefer open-source solutions with hosted convenience

Technical Implementation Considerations

Disqus Requirements:

Simple embed code implementation
User account creation with Disqus for participation
Limited customization options
No server-side development needed

Replyke Requirements:

React/React Native component integration, or alternatively JavaScript SDK or direct API access.
Users don't need to need to create another account - Replyke works with your user system.
Extensive customization capabilities
Optional server-side development for advanced features

Native vs. External Experience

The choice between Replyke and Disqus fundamentally comes down to user experience philosophy:

For traditional websites accepting external integrations: Disqus provides managed simplicity despite user friction and advertisements.
For applications prioritizing native experience: Replyke delivers seamless user integration, zero advertisements, and comprehensive social features while maintaining implementation simplicity.

For developers building communities: Replyke's open-source nature, SDK access, and advanced social features provide the foundation for sophisticated community platforms.

The commenting system landscape continues evolving toward native experiences. As Reddit discussions demonstrate, developers increasingly reject external account requirements and advertisement intrusion.
Replyke represents this evolution—offering the convenience of hosted solutions with the flexibility of native integration.

Consider your users' expectations, your application's design philosophy, and your long-term community goals when making this decision. Both solutions serve their intended purposes, but they represent fundamentally different approaches to community building in modern web applications.

From AGPL 3.0 to Apache 2.0 - Why I've changed the license on 90% of my project

Tsabary — Thu, 22 May 2025 11:02:35 +0000

How one Discord DM turned into a deep‑dive on copyleft, client friction, and protecting an open‑core business.

The DM That Sparked a Rethink

Discord user: “Was the AGPL‑3.0 license intentional? I think that means it couldn’t be used in a closed‑source app.”

When Replyke v5 launched a couple of days ago, it shipped under a single AGPL‑3.0 license - for both the server and the client packages. A day later, this question came in through Discord. It raised a valid point and prompted a closer look at whether the licensing setup aligned with how developers would actually use the framework.

What Is Replyke?

Replyke is a headless framework for adding modern social features - such as comments, feeds, mentions, notifications, and reactions - into any app with minimal effort. It’s built for developers who want powerful plug-and-play tools without having to reinvent the wheel on complex social features that aren't part of their core value proposition.

The system consists of three main parts:

Server - a backend that handles data storage, social graph logic, moderation, and auth.
Core Hooks & Contexts - React-based tools that simplify interaction with the API and manage frontend state.
UI Components - fully functional components like a comment section that developers can drop into any React app and style as needed.

Take a typical use case: a developer building a cooking app wants users to post recipes, comment on them, and follow each other. With Replyke, they can import the SDK, drop in the <SocialCommentSection />, and connect to the hosted backend - no server work required.

This makes Replyke an appealing option for solo developers and small teams. But licensing plays a major role in how approachable that option actually is.

Why I Picked AGPL Everywhere (at First)

Keep improvements open. Replyke’s backend is the “secret sauce.” AGPL’s network‑copyleft clause ensures anyone running a modified server shares those changes.
One repo, one license. Simplicity felt safer on launch week.
Community spirit. Strong copyleft matched my open source ethos—until I realized it also erected walls for exactly the developers I wanted to help.

The Problem With Blanket Copyleft on Front‑Ends

Bundling = derivative work. Import an AGPL React hook, ship a JS bundle, and your whole front‑end must go AGPL.
Friction for small teams. Indie devs rarely have daylight to consult lawyers - or the desire to release their entire cooking‑app source code.
Perception matters. Many hear “AGPL” and stop reading.

The result: a license intended to ensure freedom can end up discouraging use.

Mapping Goals to License Features

Goal	Needed License Trait
Let devs build proprietary UIs	No strong copyleft on client packages
Keep server forks public	Strong copyleft (AGPL) on server
Prevent copy-and-paste rebrands	Trademark policy > license text
Offer corporate certainty	Patent grant (nice-to-have)

Licensing is a product-market fit exercise.

The Candidates I Considered

License	Pros	Cons
BSD-3-Clause	Ultra-permissive, non-endorsement clause	No patent grant; forks can rebrand easily
LGPL-3.0	Must publish modified lib files	Extra compliance burden; scares some lawyers
MPL-2.0	File-level copyleft; lighter than LGPL	No patent grant; still some friction
Apache-2.0	Permissive + patent grant; widely adopted	Doesn’t stop rebrand—handled via trademark

The decision tipped when I realized Apache-2.0 gives the same freedom as BSD-3 but with the patent safety net corporations look for.

The Final Split

🔒 Server (AGPL-3.0-only)

If you fork and deploy @replyke/server, you must share your changes. The community benefits, and it protects the hosted business model.

🔓 Client (Apache-2.0)

Import the hooks, tweak the UI, bundle it in your app - no obligation to publish code.

™ Trademark Notice (excerpt)

"Replyke" and the Replyke logo are trademarks of Replyke. You may not use these trademarks, or any confusingly similar marks, in connection with your own products or services without prior written permission. This includes, but is not limited to, using the trademarks in advertising, promotional materials, or as part of your product names.

Copyright licenses guard code; trademarks guard brand.

Why This Matters Beyond Replyke

Open-core playbook. Many SaaS businesses keep the backend copyleft and the SDKs permissive.
Developer empathy. The lighter your license friction, the faster others build cool things on top of your platform.
Legal literacy. A single DM can save (or sink) months of future adoption pain.

Try Replyke - Now With Less Friction

Whether you’re spinning up a hobby project or powering a production app, you can now use Replyke with more freedom!

Checkout the repo on GitHub

Final Thoughts

Picking a license isn’t a one-time legal chore - it’s product design. Replyke’s journey from “AGPL-everywhere” to a dual-license model shows how thoughtful licensing can protect an open-source mission and welcome the widest possible community.

Got feedback or questions? Drop a comment and follow for more.

I've created a framework for building social products and now I've made it open-source

Tsabary — Mon, 19 May 2025 12:13:21 +0000

TLDR: Replyke v5 is officially open-source! Replyke's open-source API and React/React Native libraries help you build powerful social features in your apps in a fraction of the time.
Check Replyke out on GitHub - and if you like it - give it star!

From Side Project to Framework

Three years ago, I was looking for a new side project. Like most good ones, it started by identifying a problem. My usual pattern was to "find" problems in industries I didn’t really know much about, but somehow believed I could spot something others had missed. That led to things like a product for mechanics, or one before that for restauranteurs.

This time, I decided to do things differently. I would only explore problems I truly understood. At that point in my life, those were: traveling, poker, and software development.

I chose the last one.

I tried to spot a repetitive task - something I kept wasting time on. Looking back at my previous projects, one thing stood out: I kept re-building a comment section. So I made that the problem to solve.

Over a couple of weeks, I built what I thought was a great comment section (it was alright at best). It looked like your typical blog comment area but could be customized via props. It was simple, and it was my first ever published npm package. I was proud of it, and for a while, it got some nice feedback. But that was about it. Eventually, it faded into dormancy.

The Rebuild

Last year, after a little break from side projects, I started a new one - and it needed a comment section.

So I decided to bring my forgotten hero back from the dead and put it to use.

But with fresh eyes, I could see it clearly now: my old warrior wasn't so great.

The design was outdated.
The functionality was limited.
It wasn't secure.

I needed a comment section for this new project - but my v3 just wasn’t good enough. (And if you’re wondering how I ended up at v3, let’s just say I was pretty bad at knowing what counts as a major update back then.)

So I had to rebuild.

This new comment section had to:

Look good and modern. I was aiming for an IG/TikTok-style design - clean and sleek.
Include the features you'd expect in a serious app: mentions, GIFs, likes, replies, highlighted comments, and more.
Be secure. In the older versions, developers passed a plain object with the current user into the component. Naive and unprofessional younger me didn’t realize how wildly insecure that was. This time, I had to get it right.

More Than Just Comments

So I started building. And building. And building.

Every feature I wanted to add forced me to go beyond what I initially planned.

If I wanted mentions, I needed users. And profiles. And usernames.
If I wanted it to be secure, I needed every action to go through an authenticated backend.

And what happens when someone gets mentioned? Or receives a like? Or a reply?
There needed to be notifications. That’s the standard in any modern app, so that’s what I built.

It started to grow.

Comments became users.
Users became notifications.
Then came authentication.

When I finally implemented it in my app, I realized every comment section needs to be tied to something - a post, a product, a page. That’s when "entities" entered the picture.

Then I needed a feed. And not just a static one. It had to support filtering, sorting, and time-based queries. That turned out to be another recurring problem across projects - so I solved that too.

From there, I figured I might as well let users follow others, and create collections of their favorite items.

One by one, it all came together.

And when I looked at what I had built, I realized something: this wasn’t just a comment section anymore.

I had built a full framework for building social products from scratch - one that could power just about any project that needed in-app social features.

What’s in Replyke v4 (and v5)?

I released it as Replyke v4 a few months ago, and it’s been growing steadily since. Solo developers and teams are already using it to power their products.

Replyke's key features include:

Comment system - threaded replies, mentions, votes, customizable UI elements, built-in moderation
Feeds - filter entities by tags, content, custom metadata, follow relationships, timeframe or geography, and sort by hot, top, or controversial
In-app notifications - auto-generated in-app notifications for predefined events such as votes, mentions, follows, and more. Configurable webhooks for further action, such as sending push notifications
Curated lists - user-generated collections and nested sub-collections of entities
Follow graph - one-way follow relationships ready for social graphs
Authentication - easy user authentication with Replyke, or integration with an external user system
Admin tools - reporting, content moderation, and user management

All features come with backend APIs, typed SDKs, and ready-to-use React and React Native components.

Building Replyke: A Layered, API-Centric Approach

Replyke wasn’t built in a traditional API-first way, but it is definitely API-centric. From the beginning, I designed it so that everything is powered by a clean, consistent API. This approach has shaped the way developers use Replyke today, and it’s what makes the system flexible and extensible.

You can think of Replyke as having three core layers:

1. The API (Foundation)

The base layer of Replyke is its API. Everything the system can do, you can do through the API-whether it’s posting a comment, reporting content, creating a new entity, or updating a user profile. As long as you’re authenticated, all functionality is accessible. The API is fully documented in Replyke’s docs and can be used directly if you prefer working closer to the metal.

2. Libraries & SDKs (Developer Tools)

On top of the API, Replyke provides official libraries to simplify development. Currently, there are React and React Native libraries (supporting both CLI and Expo), with Node.js and vanilla JS SDKs coming soon for both server and client environments.

These libraries handle communication with the API and offer helpful abstractions for things like authentication, request state, pagination, and cache. For example, hooks like useEntityList make it easy to fetch entities with filters, sorting, and pagination-without writing any boilerplate yourself.

3. Components (Plug & Play UI)

At the highest level, Replyke also offers prebuilt components that are fully wired up and ready to drop into your app. Components like SocialCommentSection use the underlying libraries and hooks to provide a complete UI and logic layer for features like commenting, voting, replying, and more. These are ideal for developers who want to move fast and not reinvent the wheel.

Combined, these three layers give developers everything they need to integrate Replyke fully: from low-level API access to high-level components ready to ship.

Moderation with the Dashboard

One more critical part of the system is the Replyke Dashboard. While the three core layers handle the client experience, the dashboard is for product owners and moderators.

Through it, you can:

Monitor all content created across your app
Handle reports from users
Remove inappropriate content
Suspend or ban users

This separation ensures developers get the flexibility they want, while still giving teams the control and oversight they need to keep communities healthy and productive.

Switching to an Open Source Model

The decision to move into an open-source model wasn't an easy one. As a solo developer who’s been building the new Replyke for over a year, going open-source felt (and still feels) risky. I kept asking myself: how would I build a sustainable business around it? There are successful examples out there, but I wasn’t sure what the right path would be for me.

After a lot of thinking over the past few weeks, I feel confident that this is the right move.

Building products is getting easier and faster than ever. What will truly differentiate great products going forward is the communities around them. By open-sourcing Replyke, I hope to encourage contributions to enhance Replyke's capabilities even further, and make it the go-to framework for building social products - fast, secure, and well-structured.

Moving Forward

If you're currently building a new product, or looking to integrate social features into your existing ones - check Replyke out. It can save you weeks, if not months, of tedious work.

And if you love it but just don't need it right now - star it on GitHub and keep it for later!

https://github.com/replyke/monorepo

Contributions & Staying Updated

If you'd like to contribute, or simply stay updated, join my community over at Discord.

Lastly, if you want to connect, I always welcome new conversations:

LinkedIn: https://www.linkedin.com/in/yanay-zabary/
X/Twitter: https://x.com/yantsab
BlueSky: https://bsky.app/profile/tsabary.bsky.social

Turning Discord Threads Into SEO Gold: Making Your Discord Community Discoverable

Tsabary — Mon, 28 Apr 2025 13:03:26 +0000

Discord servers have revolutionized online communities by providing a dynamic space for real-time conversations, collaboration, and engagement. However, despite their popularity and interactive strengths, Discord communities face a significant challenge: discoverability.

Unlike traditional forums or websites, Discord content isn't easily indexed by search engines. Valuable discussions, detailed threads, and insightful replies remain hidden behind server walls. This invisibility limits potential growth, restricts community reach, and hampers the opportunity for new users to find, join, and contribute to these vibrant communities.

The potential solution lies in leveraging existing activity and converting it into publicly accessible, SEO-friendly web pages. By transforming Discord threads and replies into web pages, these interactions become indexable by Google and other search engines. The implications of this simple yet powerful shift are substantial:

Enhanced Discoverability: Each thread and interaction contributes to a growing web presence, dramatically improving organic search visibility.
Community Growth: New users can easily discover valuable content through search engines, join the conversation, and enrich the community.
Content Longevity: Discussions aren't buried or lost but become persistent and easily searchable, increasing the long-term value of community contributions.
Brand and Community Recognition: By publicly showcasing discussions, servers can build authority and recognition around specific topics or niches.

Here comes Replyke's Discord bot which bridges this critical gap by automating the synchronization of forum channels with publicly accessible web pages. This solution doesn't just enhance SEO - it unlocks the full potential of Discord communities, turning hidden interactions into vibrant, discoverable hubs of knowledge, engagement, and growth.

How to Set Up the Replyke Discord Bot

Follow these simple steps to integrate the Replyke Discord Bot with your server and start syncing forum channels to public web pages:

Step 1: Add the Bot to Your Server

Click on this link to add the Replyke bot directly to your Discord server.

Step 2: Configure Channel Permissions

By default, the Replyke bot accesses all channels upon installation. Since it exclusively operates on forum-style channels, it automatically begins syncing these channels. To ensure efficiency and manage your quota:

Go to each irrelevant channel.
Click on Edit Channel → Permissions.
Remove permissions for the Replyke bot in these channels to prevent unnecessary syncing.

Note: Channels not configured in the Replyke dashboard will not appear as public web pages, but their data would still sync and consume your quota. Ensure the bot only accesses desired channels.

Step 3: Login or Signup to Replyke

Head over to Replyke's Dashboard.
Log in to your existing account or sign up for a new one.
Create a new Replyke app, or select an existing app associated with your project. The data synced from your Discord server will remain isolated from your other data.

Step 4: Create a Discord Board App

Navigate to Apps and select Create New Discord Board App.
Fill in the required details:
- App Name
- Server ID
- Invite Link
- Relevant Images

Step 5: Configure Channels for Syncing

For each channel you want to publicly sync:
- Enter the Channel Name
- Provide a Description
- Add the Channel ID

Step 6: All Set!

Your server is now successfully configured and will start syncing immediately. Share the generated link with users for direct access to the synced content.

That's it! Your Discord community is now optimized for visibility and growth through SEO-friendly public pages.

How to Add a Comment Section to your ReactJS App (Vite/NextJS)

Tsabary — Wed, 05 Mar 2025 08:03:00 +0000

Fostering meaningful conversations within your app can make or break user engagement. Whether it's a blog, a social media platform, or an e-commerce app, providing users with a space to share their thoughts and connect with others elevates the experience to a whole new level. That's where a modern, fully-featured comment section comes in.

In this article, I'll show you exactly how to integrate a comment section into your ReactJS app. For this guide I will be using Vite, but exactly the same code could be used in a NextJS or other ReactJS based framework

If you are a mobile developer, I also wrote a similar guide for implementation in a React Native app. You can check it out over here.

By the end of this guide, you'll have a dynamic comment section up and running in no time.

For the comment section itself, we’ll be using Replyke, a versatile tool that brings a host of exciting features to the table:

Mentions to tag users directly.
Threaded replies to keep conversations structured.
Likes for instant feedback.
Highlighted comments and replies for emphasis.
GIF support to add personality.
Built-in authorization to ensure only authenticated users can interact.
User reporting to flag inappropriate content.
A powerful back office for moderation, allowing you to easily manage flagged content and take action when needed.

These features make Replyke more than just a comment section—it’s a tool for building community and trust within your app.

To keep things simple and focused, we’ll use static dummy data for our entities (posts or articles) and a logged-in user. In a production environment, you’d connect this to your dynamic content and user management system, but the implementation steps remain identical.

Why is adding a comment section so important? Beyond giving users a voice, it opens the door to richer interactions, improved retention, and higher app engagement. Plus, with Replyke’s moderation features baked in, you can ensure your app remains a safe and welcoming space for everyone. Moderation is often an afterthought, but it’s essential for managing user-generated content, and having a back office built right in is a game-changer.

This article is a step aside from my ongoing series, "How to Build a Social Network in 1 Day." If you’re as excited as I am about the power of Replyke, I encourage you to check out that series too. But for now, let’s dive in and create an engaging, fully-functional comment section for your app!

Part 1 is for basic setup for those who start from scratch for the sake of this tutorial. If you already have an existing app you can skip this step. That said, it is recommended to follow this guide as a separate app for a smooth experience first, and simply copy any code to your own app when done.

At the end of every major milestone you would find a link to GitHub with the source code up to that point.

Part 1: Basic repository setup

Setting Up the Project

To get started, navigate to the directory where you want to create your repository. Open your terminal and run the following command:

npm create vite@latest comments-tutorial -- --template react-ts

This initializes a new React project with TypeScript using Vite in your chosen directory.

Next, navigate into the newly created repository and install the necessary dependencies:

cd comments-tutorial
npm install

Cleaning Up the Project Structure

Before proceeding, let’s clean up unnecessary files:

Delete the following files:
- Any files inside the public/ directory
- Any files inside src/assets/
- src/App.css
Clear the contents of these files (but keep them):
- src/index.css
- src/App.tsx

After clearing src/App.tsx, it should look like this:

function App() {
  return <div>Hello World</div>;
}

export default App;

Installing Tailwind CSS

For easy styling, install Tailwind CSS by running:

npm install tailwindcss @tailwindcss/vite

Next, update your Vite configuration to include Tailwind CSS. Open vite.config.ts and modify it to look like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()]
});

Then, add the following import statement to your empty src/index.css file:

@import "tailwindcss";

Now, verify Tailwind is working by updating src/App.tsx:

function App() {
  return <div className="min-h-screen bg-red-500">Hello World</div>;
}

export default App;

Run the development server:

npm run dev

Open your browser, and you should see a red screen with "Hello World" in the top-left corner. If not, double-check the steps above or refer to the official Tailwind CSS documentation for any recent changes.

Setting Up ShadCN

Before proceeding with Replyke, let's configure ShadCN for UI components.

Modify tsconfig.json by adding the following inside compilerOptions at the root level (as a sibling of references):

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }

Modify tsconfig.app.json by adding the following under compilerOptions:

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }

Install Node types as a dev dependency:

npm install -D @types/node

Update vite.config.ts to resolve alias paths. Your final file should look like this:

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Initialize ShadCN:

npx shadcn@latest init

You can simply use all the default values during the setup.

Lastly, add the components we will need by running

npx shadcn@latest add button drawer scroll-area sheet sonner

That’s it for the setup! You can check the repository state at this point.
Part 1 completed source code on GitHub for reference.

Part 2: Setting Up Replyke in Your Project

With our basic app setup complete and running, it's time to integrate Replyke and bring our comment section to life. This involves setting up a new Replyke project and adding its provider to our app. Unlike full-scale authentication setups, we'll be using a mock external user system for this tutorial. Replyke expects a signedToken prop containing a signed JWT with user details, and we’ll configure this later. For now, let’s focus on the foundational setup of Replyke itself.

Steps:

Create a Project on Replyke Dashboard: Head over to dashboard.replyke.com, create an account if you don’t already have one, and start a new project. Once the project is created, copy the provided Project ID into a .env file.
Install Replyke for ReactJS: Open your terminal and run the following command to install Replyke for your Expo project:
```
npm install @replyke/react-js
```
Wrap Your App with ReplykeProvider: In your src/App.tsx file, wrap your app’s content with the ReplykeProvider component from Replyke. Pass the Project ID you copied earlier as the projectId prop. This initializes Replyke within your app.

Here’s how your src/App.tsx file should look like after making these changes (we're also adding the sonner Toaster while we're at it):

import { ReplykeProvider } from "@replyke/react-js";
import { Toaster } from "@/components/ui/sonner";

function App() {
  return (
    <ReplykeProvider projectId={import.meta.env.VITE_PUBLIC_REPLYKE_PROJECT_ID}>
      <Toaster />
      <div>Hello world</div>
    </ReplykeProvider>
  );
}

export default App;

With these steps completed, Replyke is now set up and ready to power your comment section.

Part 3: Creating Dummy Data

To test our comment section, we’ll need some sample data for posts and users. This will allow us to simulate the interaction between users and the comment system. Let’s create a file to store our dummy data.

Create a Constants Folder: Inside your project’s src directory, create a folder named constants.
Add the Dummy Data File: In the constants folder, create a new file called dummy-data.ts and paste the following code:

    // Dummy data for posts
    const posts = [
      { id: "post1", content: "This is the first post." },
      { id: "post2", content: "Hello world! This is post two." },
      { id: "post3", content: "Another day, another post." },
      { id: "post4", content: "Simple content for post four." },
      { id: "post5", content: "Post five is here." },
      { id: "post6", content: "Sharing thoughts in post six." },
      { id: "post7", content: "This is the seventh post." },
      { id: "post8", content: "Post eight with simple text." },
      { id: "post9", content: "The ninth post is ready." },
      { id: "post10", content: "Finally, this is the tenth post." },
    ];

    // Dummy data for users
    const users = [
      { id: "user1", username: "john123" },
      { id: "user2", username: "emma456" },
      { id: "user3", username: "mike789" },
      { id: "user4", username: "sarah202" },
    ];

    export { posts, users };

Save and Import the Dummy Data: With the dummy data file in place, we can now use these posts and users in our app to simulate interactions.

Render posts

Lastly, let's present our dummy posts in our home screen in a nice grid. Replace the contents of src/App.tsx with the following:

import { ReplykeProvider } from "@replyke/react-js";
import { Toaster } from "@/components/ui/sonner";
import { posts } from "./constants/dummy-data";

function App() {
  return (
    <ReplykeProvider projectId={import.meta.env.VITE_PUBLIC_REPLYKE_PROJECT_ID}>
      <Toaster />
      <div className="h-screen grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 p-6 sm:p-8 md:p-12 lg:p-24 xl:p-52 gap-4 md:gap-8 lg:gap-12 m-auto">
        {posts.map((post) => (
          <div className="bg-white p-4 mb-4 rounded-xl shadow-lg">
            {/* Post Content */}
            <p className="text-lg font-bold text-gray-800">{post.id}</p>
            <p className="text-gray-600 mt-2">{post.content}</p>

            {/* Open Discussion Button */}
            <Button className="w-full mt-4 cursor-pointer">
              Open Discussion
            </Button>
          </div>
        ))}
      </div>
    </ReplykeProvider>
  );
}

export default App;

You should now see all of our dummy posts when you open the app.

Parts 2 and 3 completed source code on GitHub for reference.

Part 4: Adding the Comment Section

With our app setup complete and displaying posts, it’s time to integrate the Replyke comment section. This will allow users to engage in discussions on each post.

Installing the Social Comment Package

To begin, install the Replyke social comments package:

npm install @replyke/comments-social-react-js

Ensuring Responsiveness

We want our app to be fully responsive. To achieve this, we’ll use both the Drawer and Sheet components from ShadCN, displaying one or the other depending on the screen size.

To implement this, we first need a utility hook to detect screen size.

Creating a Media Query Hook

Inside the src folder, create a new directory called hooks, and within it, create a file named useMediaQuery.tsx. Add the following code:

import { useState, useEffect } from "react";

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    window.addEventListener("resize", listener);
    return () => window.removeEventListener("resize", listener);
  }, [matches, query]);

  return matches;
}

This hook allows us to detect whether the screen size meets a specified media query.

Creating the DiscussionSheet Component

Now, let’s create the comment section component. Inside the src/components directory, create a file named DiscussionSheet.tsx and add the following:

import { useEntity } from "@replyke/react-js";
import {
  SocialStyleCallbacks,
  useSocialComments,
  useSocialStyle,
} from "@replyke/comments-social-react-js";
import { toast } from "sonner";
import { Sheet, SheetContent } from "@/components/ui/sheet";
import { Drawer, DrawerContent } from "@/components/ui/drawer";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useMediaQuery } from "@/hooks/useMediaQuery";

export function DiscussionSheet({
  isSheetOpen,
  onClose,
}: {
  isSheetOpen: boolean;
  onClose: () => void;
}) {
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const { entity } = useEntity();

  const callbacks: SocialStyleCallbacks = {
    loginRequiredCallback: () => {
      toast("Please log in first");
    },
    // More callbacks can be used to further customize the comment section’s behavior.
  };

  const styleConfig = useSocialStyle(); // This is required, even if using default styles.

  const { CommentSectionProvider, SortByButton, CommentsFeed, NewCommentForm } =
    useSocialComments({
      entityId: entity?.id,
      styleConfig,
      callbacks,
    });

  const sortByOptions = (
    <div className="flex px-6 items-center gap-1">
      <h4 className="font-semibold text-base flex-1">Comments</h4>
      <SortByButton priority="top" activeView={<div className="bg-black py-1 px-2 rounded-md text-white text-xs">Top</div>} nonActiveView={<div className="bg-gray-200 py-1 px-2 rounded-md text-xs">Top</div>} />
      <SortByButton priority="new" activeView={<div className="bg-black py-1 px-2 rounded-md text-white text-xs">New</div>} nonActiveView={<div className="bg-gray-200 py-1 px-2 rounded-md text-xs">New</div>} />
      <SortByButton priority="old" activeView={<div className="bg-black py-1 px-2 rounded-md text-white text-xs">Old</div>} nonActiveView={<div className="bg-gray-200 py-1 px-2 rounded-md text-xs">Old</div>} />
    </div>
  );

  const mobileSection = (
    <Drawer open={isSheetOpen} onOpenChange={(state) => !state && onClose()}>
      <DrawerContent className="h-screen overflow-hidden flex flex-col p-0 pt-6 bg-white gap-3">
        <CommentSectionProvider>
          {sortByOptions}
          <ScrollArea className="flex-1 bg-white">
            <CommentsFeed />
          </ScrollArea>
          <div className="border-t">{isSheetOpen && <NewCommentForm />}</div>
        </CommentSectionProvider>
      </DrawerContent>
    </Drawer>
  );

  const desktopSection = (
    <Sheet open={isSheetOpen} onOpenChange={(state) => !state && onClose()}>
      <SheetContent className="h-screen overflow-hidden flex flex-col p-0 pt-6 bg-white">
        <CommentSectionProvider>
          {sortByOptions}
          <ScrollArea className="flex-1 bg-white">
            <CommentsFeed />
          </ScrollArea>
          <div className="border-t">{isSheetOpen && <NewCommentForm />}</div>
        </CommentSectionProvider>
      </SheetContent>
    </Sheet>
  );

  return <div className="relative">{isDesktop ? desktopSection : mobileSection}</div>;
}

export default DiscussionSheet;

Explanation of DiscussionSheet Component

useEntity - This hook provides the entity context, which in our app is a "post". The connection between Replyke and our posts will be clear once we integrate this component into our App.
useSocialStyle - This hook is required to pass a style configuration object, even if we are using the default styles.
Callbacks - The loginRequiredCallback function notifies users when authentication is needed before interacting. There are additional callbacks available to further customize the behavior of the comment section.
useSocialComments - This hook generates the building blocks for the comment section, including the provider, sorting buttons, and comment components.
SortByButton - These buttons allow sorting comments by "Top", "New", and "Old".
Responsive Layout - The component conditionally renders a Drawer for mobile and a Sheet for desktop, using useMediaQuery.

Updating the App Component

The final step is integrating DiscussionSheet in App.tsx. Replace its content with:

import { useState } from "react";
import { EntityProvider, ReplykeProvider } from "@replyke/react-js";
import { Toaster } from "@/components/ui/sonner";
import { posts } from "./constants/dummy-data";
import { Button } from "./components/ui/button";
import DiscussionSheet from "./components/DiscussionSheet";

function App() {
  const [selectedPostId, setSelectdPostId] = useState<string | null>(null);

  return (
    <ReplykeProvider projectId={import.meta.env.VITE_PUBLIC_REPLYKE_PROJECT_ID}>
      <Toaster />
      <EntityProvider referenceId={selectedPostId} createIfNotFound>
        <DiscussionSheet
          isSheetOpen={!!selectedPostId}
          onClose={() => setSelectdPostId(null)}
        />
      </EntityProvider>
      <div className="h-screen grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 p-6 sm:p-8 md:p-12 lg:p-24 xl:p-52 gap-4 md:gap-8 lg:gap-12 m-auto">
        {posts.map((post) => (
          <div className="bg-white p-4 mb-4 rounded-xl shadow-lg" key={post.id}>
            {/* Post Content */}
            <p className="text-lg font-bold text-gray-800">{post.id}</p>
            <p className="text-gray-600 mt-2">{post.content}</p>

            {/* Open Discussion Button */}
            <Button
              onClick={() => setSelectdPostId(post.id)}
              className="w-full mt-4 cursor-pointer"
            >
              Open Discussion
            </Button>
          </div>
        ))}
      </div>
    </ReplykeProvider>
  );
}

export default App;

Explanation of App Component Changes

selectedPostId - This state determines which post’s comment section is open.
EntityProvider - Wraps DiscussionSheet, linking the Replyke comment system to our posts.
referenceId - Instead of entityId, we use referenceId, allowing Replyke to link our existing post IDs to its entities.
createIfNotFound - Ensures an entity is created if it doesn’t exist.
Open Discussion Button - Clicking it sets selectedPostId, opening the discussion sheet.

Now, clicking “Open Discussion” will open the comment section for that specific post!

Part 4 completed source code on GitHub for reference.

Part 5: Integrating Authentication with Replyke

At the end of Part 4, we successfully set up a functional comment section, but we couldn't interact with it because we weren't authenticated. Replyke's comment section requires information about the logged-in user to function properly. This final part focuses on integrating authentication into our app, enabling users to leave comments and interact with the system as authenticated users.

Understanding Replyke's Authentication

Replyke offers a simple yet robust mechanism to integrate authentication. Here's how it works:

JWT Keys: Replyke requires project owners to generate a JWT key pair via the Replyke dashboard. This generates:
- A secret key (only visible once) for signing JWTs.
- A public key, which Replyke keeps and associates with the project for verification.
JWT Signing: Developers use the secret key to sign a JWT with logged-in user details. This JWT is passed to Replyke to verify its validity and trustworthiness.
Authenticated Actions: Once verified, Replyke associates the actions (comments, likes, etc.) with the authenticated user.

Critical Note on Security

Never (NEVER) store or use the secret key on the client side in production. Signing JWTs client-side is a major security risk.
In production, always implement JWT signing on your server. Replyke’s documentation provides detailed guidance on this.
For this tutorial, we’ll demonstrate a simplified implementation for testing and educational purposes only, using Replyke’s useSignTestingJwt hook.

Setting Up Environment Variables

Add your secret key as an environment variable in Expo:

EXPO_PUBLIC_REPLYKE_SECRET_KEY=your-secret-key
EXPO_PUBLIC_REPLYKE_PROJECT_ID=your-project-id

Use these variables in your src/App.tsx file for authentication setup.

Updated `src/App.tsx`

import { useEffect, useState } from "react";
import {
  EntityProvider,
  ReplykeProvider,
  useSignTestingJwt,
} from "@replyke/react-js";
import { Toaster } from "@/components/ui/sonner";
import { posts, users } from "./constants/dummy-data";
import { Button } from "./components/ui/button";
import DiscussionSheet from "./components/DiscussionSheet";

const PROJECT_ID = import.meta.env.VITE_PUBLIC_REPLYKE_PROJECT_ID;
const PRIVATE_KEY = import.meta.env.VITE_PUBLIC_REPLYKE_SECRET_KEY;

function App() {
  const signTestingJwt = useSignTestingJwt();

  const [selectedPostId, setSelectdPostId] = useState<string | null>(null);
  const [signedToken, setSignedToken] = useState<string>();

  useEffect(() => {
    const handleSignJwt = async () => {
      const payload = users[0];

      const token = await signTestingJwt({
        projectId: PROJECT_ID,
        payload,
        privateKey: PRIVATE_KEY,
      });
      // Set the signed JWT in the state
      setSignedToken(token);
    };

    handleSignJwt();
  }, []);

  return (
    <ReplykeProvider projectId={PROJECT_ID} signedToken={signedToken}>
      <Toaster />
      <EntityProvider referenceId={selectedPostId} createIfNotFound>
        <DiscussionSheet
          isSheetOpen={!!selectedPostId}
          onClose={() => setSelectdPostId(null)}
        />
      </EntityProvider>
      <div className="h-screen grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 p-6 sm:p-8 md:p-12 lg:p-24 xl:p-52 gap-4 md:gap-8 lg:gap-12 m-auto">
        {posts.map((post) => (
          <div className="bg-white p-4 mb-4 rounded-xl shadow-lg" key={post.id}>
            {/* Post Content */}
            <p className="text-lg font-bold text-gray-800">{post.id}</p>
            <p className="text-gray-600 mt-2">{post.content}</p>

            {/* Open Discussion Button */}
            <Button
              onClick={() => setSelectdPostId(post.id)}
              className="w-full mt-4 cursor-pointer"
            >
              Open Discussion
            </Button>
          </div>
        ))}
      </div>
    </ReplykeProvider>
  );
}

export default App;

Logging Out

When a user signs out, we need to notify Replyke to clear the authenticated state. Use the signOut function from the useAuth hook:

import { useAuth } from "@replyke/react-js";

const { signOut } = useAuth();
signOut?.();

This function should be called whenever a user logs out, and it is only available within the ReplykeProvider context.

Key Rotation

If you’ve tested this implementation and later move JWT signing to the server, rotate your secret keys immediately to ensure security. Any key exposed on the client side is compromised and should not be used in production. Regardless, it is a good habit to rotate keys periodically.

Reports and Moderation Tools

Replyke also provides built-in reporting and moderation tools to ensure a safe and respectful community. If a user long-presses on a comment by another user, they can report it. Any reported comment will appear in the project’s dashboard on Replyke for moderation. This seamless integration allows developers to monitor and manage user-generated content effectively.

With this setup, your app can now handle authenticated interactions with Replyke's comment system, providing users with a seamless experience while maintaining a secure foundation. From here, you can explore further customization and server-side integrations for a production-ready implementation.

Part 5 completed source code on GitHub for reference.

Bonus Parts

This article doesn’t end here. In two bonus parts, we will explore how to:

Add GIF Functionality: Enhance user interactions by allowing them to post comments with GIFs, making conversations more engaging and lively.
Add Likes to Posts: Implement a simple and efficient like functionality for posts, encouraging user interaction and providing instant feedback.

Both features are super easy to implement using Replyke’s tools. Let’s dive into them next!

Bonus Part 1: Adding GIF Functionality

Enhancing user interactions with GIFs is incredibly easy using Replyke. Here's how:

Get a GIPHY API Key: Go to GIPHY and create a new API key.
Enable GIFs in Replyke:

Copy your API key.
Go to your project dashboard on Replyke.
Activate the GIF feature and paste your API key.

That's it! GIF support will now be enabled in your comment section, allowing users to search and post GIFs directly.

Bonus Part 2: Adding Likes to Posts

Implementing likes for posts is just as straightforward. Here's how:

Create a SinglePost Component: Create a new SinglePost component in your components directory. It will hold our previous UI logic for each post plus newly added buttons for voting.

import { useEntity, useUser } from "@replyke/react-js";
import { toast } from "sonner";
import { Button } from "./ui/button";
import { cn } from "../lib/utils";

const SinglePost = ({
  handleOpenDiscussionSheet,
}: {
  handleOpenDiscussionSheet: () => void;
}) => {
  const { user } = useUser();
  const {
    entity,
    userDownvotedEntity,
    userUpvotedEntity,
    upvoteEntity,
    removeEntityUpvote,
    downvoteEntity,
    removeEntityDownvote,
  } = useEntity();

  const upvotesCount = entity?.upvotes.length || 0;
  const downvotesCount = entity?.downvotes.length || 0;

  const handleUpvote = () => {
    if (!user) return toast("Please login first");
    if (userUpvotedEntity) {
      removeEntityUpvote?.();
    } else {
      upvoteEntity?.();
    }
  };

  const handleDownvote = () => {
    if (!user) return toast("Please login first");

    if (userDownvotedEntity) {
      removeEntityDownvote?.();
    } else {
      downvoteEntity?.();
    }
  };

  return (
    <div className="bg-white p-4 mb-4 rounded-xl shadow-lg">
      {/* Post Content */}
      <p className="text-lg font-bold text-gray-800">{entity?.referenceId}</p>
      <p className="text-gray-600 mt-2">{entity?.content}</p>

      {/* Voting Section */}
      <div className="grid grid-cols-2 gap-2 items-center mt-4">
        {/* Upvote Button */}
        <Button
          onClick={handleUpvote}
          size="sm"
          className={cn(
            "cursor-pointer text-xs",
            userUpvotedEntity
              ? "bg-green-500 hover:bg-green-500  text-white"
              : "bg-gray-200 hover:bg-gray-200 text-gray-800"
          )}
        >
          {userUpvotedEntity ? "Upvoted" : "Upvote"}
          <span>({upvotesCount})</span>
        </Button>

        {/* Downvote Button */}
        <Button
          onClick={handleDownvote}
          size="sm"
          className={cn(
            "cursor-pointer text-xs",
            userDownvotedEntity
              ? "bg-red-500 hover:bg-red-500 text-white"
              : "bg-gray-200 hover:bg-gray-200 text-gray-800"
          )}
        >
          {userDownvotedEntity ? "Downvoted" : "Downvote"}
          <span>({downvotesCount})</span>
        </Button>
      </div>

      {/* Open Discussion Button */}
      <Button
        onClick={handleOpenDiscussionSheet}
        className="w-full mt-4 cursor-pointer"
      >
        Open Discussion{" "}
        {(entity?.repliesCount || 0) > 0 && `(${entity?.repliesCount})`}
      </Button>
    </div>
  );
};

export default SinglePost;

Wrap Each Post with an EntityProvider: Update the src/App.tsx file to return the new SinglePost component, with each post wrapped in an EntityProvider.

import { useEffect, useState } from "react";
import {
  EntityProvider,
  ReplykeProvider,
  useSignTestingJwt,
} from "@replyke/react-js";
import { Toaster } from "@/components/ui/sonner";
import { posts, users } from "./constants/dummy-data";
import DiscussionSheet from "./components/DiscussionSheet";
import SinglePost from "./components/SinglePost";

const PROJECT_ID = import.meta.env.VITE_PUBLIC_REPLYKE_PROJECT_ID;
const PRIVATE_KEY = import.meta.env.VITE_PUBLIC_REPLYKE_SECRET_KEY;

function App() {
  const signTestingJwt = useSignTestingJwt();

  const [selectedPostId, setSelectdPostId] = useState<string | null>(null);
  const [signedToken, setSignedToken] = useState<string>();

  useEffect(() => {
    const handleSignJwt = async () => {
      const payload = users[0];

      const token = await signTestingJwt({
        projectId: PROJECT_ID,
        payload,
        privateKey: PRIVATE_KEY,
      });
      // Set the signed JWT in the state
      setSignedToken(token);
    };

    handleSignJwt();
  }, []);

  return (
    <ReplykeProvider projectId={PROJECT_ID} signedToken={signedToken}>
      <Toaster />
      <EntityProvider referenceId={selectedPostId} createIfNotFound>
        <DiscussionSheet
          isSheetOpen={!!selectedPostId}
          onClose={() => setSelectdPostId(null)}
        />
      </EntityProvider>
      <div className="h-screen grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 p-6 sm:p-8 md:p-12 lg:p-24 xl:p-52 gap-4 md:gap-8 lg:gap-12 m-auto">
        {posts.map((post) => (
          <EntityProvider referenceId={post.id} key={post.id}>
            <SinglePost
              handleOpenDiscussionSheet={() => setSelectdPostId(post.id)}
            />
          </EntityProvider>
        ))}
      </div>
    </ReplykeProvider>
  );
}

export default App;

That's it! Your posts now support upvotes and downvotes.

Part 6 completed source code on GitHub for reference.

Wrapping Up

In this article, we’ve covered setting up a fully functional comment section, adding authentication, enabling GIFs, and implementing voting functionality for posts. These features were straightforward to integrate, showcasing Replyke’s power and simplicity.

If you found this interesting, explore the rest of what Replyke has to offer, including advanced feeds, app notifications, user-generated lists, profiles, and much more. All are as easy to implement as the features we’ve covered here!

Stay Updated

Don’t forget to join the Discord server where I post free boilerplate code repos for different types of social networks. Updates about the article tutorials and additional resources will also be shared there. Lastly, follow me for updates here and on X/Twitter & BlueSky.

How to Build a Social Network in 1 Day: Part 7 - Adding Interactivity

Tsabary — Mon, 10 Feb 2025 13:10:24 +0000

In our last article, we successfully implemented the feed for our social network. We designed the UI to display posts, integrating user avatars, post content, and placeholder buttons for interaction. We also ensured that posts load dynamically using infinite scrolling and pull-to-refresh.

At this point, our feed visually resembles a fully functional social media experience, but the buttons remain non-functional. That changes today.

What We’ll Cover in This Chapter

In this article, we will wire up the buttons, bringing interactivity to the feed. Specifically, we will implement:

Profile Navigation:
- Clicking on an author's profile picture will navigate the user to the author’s profile.
- If the post belongs to the current user, clicking the avatar will take them to their own profile.
Liking Posts:
- Clicking the heart icon will toggle a like on the post.
- If a user has already liked a post in the past, the button will reflect that immediately when the feed loads (thanks to Replyke's data).
- Clicking again will remove the like.
Opening the Comment Section:
- Clicking the chat bubble icon will open a comment section sheet, allowing users to view and leave comments.
Managing Bookmarks:
- Clicking the bookmark icon will open the collections sheet, enabling users to save posts to their collections.

By the end of this article, all essential post interactions will be fully functional, making our app feel more like a real social platform. Let's dive in!

Accumulated reading time so far: 37 minutes.

Part 7 completed repo on GitHub for reference

Configuring Avatar Interactivity

To make the user avatars interactive, we will use the useUser hook from Replyke to get access to the current user. Based on whether the id of the current user matches the author's id, we will navigate accordingly using the router:

import React from "react";
import { View, TouchableOpacity, Text, Pressable } from "react-native";
import { useEntity, useUser } from "@replyke/expo";
import { UserAvatar } from "@replyke/ui-core-react-native";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import AntDesign from "@expo/vector-icons/AntDesign";
import Ionicons from "@expo/vector-icons/Ionicons";
import { useRouter } from "expo-router";

function PostActions() {
  const router = useRouter();
  const { user } = useUser();
  const { entity } = useEntity();

  if (!entity) return null;

  return (
    <View
      className="absolute right-4 bottom-20 z-50 items-center gap-6 bg-black/30 p-3 pb-4 rounded-2xl"
      style={{ columnGap: 12 }}
    >
      {/* User avatar and follow button */}
      <Pressable
        onPress={() =>
          entity.user!.id === user?.id
            ? router.navigate("/(tabs)/profile")
            : router.navigate(`/account/${entity.user!.id}`)
        }
      >
        <UserAvatar user={entity.user} size={46} borderRadius={8} />
      </Pressable>

      {/* LIKE BUTTON */}
      <TouchableOpacity className="items-center gap-1.5">
        <AntDesign name="heart" size={36} color="white" />

        <Text className="text-white overflow-visible">
          {entity?.upvotes.length}
        </Text>
      </TouchableOpacity>

      {/* OPEN COMMENT SECTION */}
      <TouchableOpacity className="items-center gap-1.5">
        <Ionicons name="chatbubble" size={36} color="#ffffff" />

        {(entity.repliesCount || 0) > 0 && (
          <Text className="text-[#9ca3af]">{entity.repliesCount}</Text>
        )}
      </TouchableOpacity>

      {/* BOOKMARK BUTTON */}
      <TouchableOpacity>
        <FontAwesome name="bookmark" size={32} color="#ffffff99" />
      </TouchableOpacity>
    </View>
  );
}

export default PostActions;

With this implementation, clicking on an avatar will navigate users to the correct profile based on ownership. Next, we will move on to wiring up the like button!

Configuring the Like Button

The like button allows users to express appreciation for a post. To make this work, we retrieve additional properties from the useEntity hook:

userUpvotedEntity: A boolean indicating if the current user has already liked the post.
upvoteEntity(): A function to add an upvote.
removeEntityUpvote(): A function to remove an existing upvote.

When the like button is pressed:

If the user is not logged in, an alert prompts them to log in or create an account.
If the user has already liked the post, clicking the button removes the like.
If the user has not liked the post, clicking the button adds a like.

New code after adding like functionality:

import React from "react";
import { View, TouchableOpacity, Text, Pressable, Alert } from "react-native";
import { useEntity, useUser } from "@replyke/expo";
import { UserAvatar } from "@replyke/ui-core-react-native";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import AntDesign from "@expo/vector-icons/AntDesign";
import Ionicons from "@expo/vector-icons/Ionicons";
import { useRouter } from "expo-router";

function PostActions() {
  const router = useRouter();
  const { user } = useUser();
  const { entity, userUpvotedEntity, upvoteEntity, removeEntityUpvote } =
    useEntity();

  if (!entity) return null;

  return (
    <View
      className="absolute right-4 bottom-20 z-50 items-center gap-6 bg-black/30 p-3 pb-4 rounded-2xl"
      style={{ columnGap: 12 }}
    >
      {/* User avatar and follow button */}
      <Pressable
        onPress={() =>
          entity.user!.id === user?.id
            ? router.navigate("/(tabs)/profile")
            : router.navigate(`/account/${entity.user!.id}`)
        }
      >
        <UserAvatar user={entity.user} size={46} borderRadius={8} />
      </Pressable>

      {/* LIKE BUTTON */}
      <TouchableOpacity
        onPress={() => {
          if (!user) {
            Alert.alert(
              "Oops! Login Required. Please sign in or create an account to continue."
            );
            return;
          }
          if (userUpvotedEntity) {
            removeEntityUpvote?.();
          } else {
            upvoteEntity?.();
          }
        }}
        className="items-center gap-1.5"
      >
        <AntDesign name="heart" size={36} color="white" />

        <Text className="text-white overflow-visible">
          {entity?.upvotes.length}
        </Text>
      </TouchableOpacity>

      {/* OPEN COMMNENT SECTION */}
      <TouchableOpacity className="items-center gap-1.5">
        <Ionicons name="chatbubble" size={36} color="#ffffff" />

        {(entity.repliesCount || 0) > 0 && (
          <Text className="text-[#9ca3af]">{entity.repliesCount}</Text>
        )}
      </TouchableOpacity>

      {/* BOOKMARK BUTTON */}
      <TouchableOpacity>
        <FontAwesome name="bookmark" size={32} color="#ffffff99" />
      </TouchableOpacity>
    </View>
  );
}

export default PostActions;

This ensures that the button properly reflects the user's past interactions with the post, making the experience seamless and intuitive.

With this implementation, clicking on the heart will either like or remove a like from the user. Next, we will configure the comment section button!

Preparing for Comment and Bookmark Buttons

Both the comment section and bookmark feature require opening bottom sheets. Instead of creating a separate sheet for each post, we should place a single instance of these sheets at the highest level of the app. This way, all screens (Home Feed, Profile Feed, Account Feed) can reuse the same sheets.

To achieve this, we will:

Create a context provider that manages the opening and closing of these sheets.
Wrap our app with this provider so any screen can trigger a sheet.
Implement dummy sheets initially to confirm that everything works before adding actual content.

Next, we will build the context provider and set up the foundation for our reusable bottom sheets!

Installing Required Dependencies

To get started, install the required dependencies:

npx expo install @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler

Note: React Native Gesture Handler v3 and React Native Reanimated v3 require additional setup steps. Follow their respective installation guides:

Additionally, ensure your app is wrapped with GestureHandlerRootView in app/_layout.tsx as follows:

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function Layout() {
  return (
    <GestureHandlerRootView>
      <ReplykeProvider projectId={process.env.EXPO_PUBLIC_REPLYKE_PROJECT_ID!}>
        <SafeAreaProvider>
          <SafeAreaView className="flex-1">
            <Stack
              screenOptions={{
                headerShown: false,
              }}
            >
              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            </Stack>
          </SafeAreaView>
          <StatusBar style="dark" />
        </SafeAreaProvider>
      </ReplykeProvider>
    </GestureHandlerRootView>
  );
}

Creating the Sheet Manager Context

Next, create a new folder in the root of your project called context, and inside it, create a file named SheetManagerContext.tsx. Add the following code:

import { useRef } from "react";
import React, { createContext, useState } from "react";
import BottomSheet from "@gorhom/bottom-sheet";
import { BottomSheetMethods } from "@gorhom/bottom-sheet/lib/typescript/types";

type SheetManagerContext = {
  commentSetionSheetRef: React.RefObject<BottomSheetMethods>;
  collectionsSheetRef: React.RefObject<BottomSheetMethods>;

  openCommentSectionSheet: (newEntityId?: string) => void;
  closeCommentSectionSheet: () => void;

  openCollectionsSheet: (newEntityId?: string) => void;
  closeCollectionsSheet: () => void;

  commmentsEntityId: string | null;
  collectionsEntityId: string | null;
};

export const SheetManagerContext = createContext<Partial<SheetManagerContext>>(
  {}
);

export const SheetManagerProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {

  // Ref for the comment section sheet
  const commentSetionSheetRef = useRef<BottomSheet>(null);

  // Ref for the collections sheet
  const collectionsSheetRef = useRef<BottomSheet>(null);

  // The entity for which the user is the comment section
  const [commmentsEntityId, setCommentsEntityId] = useState<string | null>(null);

  // The entity the user wants to add to a collection
  const [collectionsEntityId, setCollectionsEntityId] = useState<string | null>(null);


  // Function to open the comment section sheet and set the entity
  const openCommentSectionSheet = (newEntityId?: string) => {
    if (newEntityId) setCommentsEntityId(newEntityId);
    commentSetionSheetRef.current?.snapToIndex(0);
  };

  // Function to close the comment section sheet and reset the entity
  const closeCommentSectionSheet = () => {
    commentSetionSheetRef.current?.close();
    setCommentsEntityId(null);
  };


  // Function to open the collections sheet and set the entity
  const openCollectionsSheet = (newEntityId?: string) => {
    if (newEntityId) setCollectionsEntityId(newEntityId);
    collectionsSheetRef.current?.snapToIndex(0);
  };

  // Function to close the collections sheet and reset the entity
  const closeCollectionsSheet = () => {
    collectionsSheetRef.current?.close();
    setCollectionsEntityId(null);
  };

  return (
    <SheetManagerContext.Provider
      value={{
        commentSetionSheetRef,
        collectionsSheetRef,
        openCommentSectionSheet,
        closeCommentSectionSheet,
        openCollectionsSheet,
        closeCollectionsSheet,
        commmentsEntityId,
        collectionsEntityId,
      }}
    >
      {children}
    </SheetManagerContext.Provider>
  );
};

Adding the Sheet Manager Provider

In the _layout.tsx file at the root of your app directory, wrap the ReplykeProvider with SheetManagerProvider as follows:

<GestureHandlerRootView>
  <ReplykeProvider projectId={process.env.EXPO_PUBLIC_REPLYKE_PROJECT_ID!}>
    <SheetManagerProvider>
      <SafeAreaProvider>
        <SafeAreaView className="flex-1">
          <Stack
          screenOptions={{
            headerShown: false,
          }}
        >
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          </Stack>
        </SafeAreaView>
        <StatusBar style="dark" />
      </SafeAreaProvider>
    </SheetManagerProvider>
  </ReplykeProvider>
</GestureHandlerRootView>

Creating the Hook for Using the Sheet Manager

Create a new folder called hooks at the root of your project. Inside it, create a file named useSheetManager.tsx and add the following code:

import { useContext } from "react";
import { SheetManagerContext } from "../context/SheetManagerContext";

export default function useSheetManager() {
  return useContext(SheetManagerContext);
}

Explanation

Now that everything is set up, here’s what we’ve done:

Installed dependencies: We installed @gorhom/bottom-sheet for managing sheets, along with its dependencies.
Set up GestureHandlerRootView: This ensures smooth gesture handling, which is required for bottom sheets.
Created SheetManagerContext:
- Holds references for the comment section and collections bottom sheets.
- Provides functions to open and close these sheets.
- Stores the entity IDs associated with each sheet.
Wrapped the app in SheetManagerProvider: This makes the sheet context available throughout the app.
Created a custom hook useSheetManager: This simplifies access to the sheet manager from any component.

With this foundation in place, we can now easily open and close the bottom sheets from anywhere in our app. Next, we will implement the actual sheets and connect them to the post actions!

Creating and Integrating Bottom Sheets for Comments and Collections

Now that we have set up our sheet manager, we need to create two separate bottom sheets for comments and collections. These sheets will open when users tap on their respective buttons in a post.

Step 1: Create New Component Files

Navigate to the components/shared directory and create the following two files:

`CommentSectionSheet.tsx`

import React, { useCallback, useMemo, useState } from "react";
import {
  Platform,
  KeyboardAvoidingView,
  Keyboard,
  Text,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetView,
} from "@gorhom/bottom-sheet";

import useSheetManager from "../../hooks/useSheetManager";
import { cn } from "../../utils/cn";

const CommentSectionSheet = () => {
  const { commentSetionSheetRef } = useSheetManager();
  const snapPoints = useMemo(() => ["100%"], []);
  const [sheetOpen, setSheetOpen] = useState(false);

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
      />
    ),
    []
  );

  return (
    <SafeAreaView className={cn("flex-1 absolute inset-0", sheetOpen ? "" : "pointer-events-none")}>
      <View className="flex-1 relative">
        <BottomSheet
          ref={commentSetionSheetRef}
          index={-1}
          snapPoints={snapPoints}
          enablePanDownToClose
          backdropComponent={renderBackdrop}
          onChange={(state) => {
            setSheetOpen(state > -1);
            if (state === -1) {
              Keyboard.dismiss();
            }
          }}
        >
          <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} className="flex-1">
            <BottomSheetView className="flex-1">
              <Text>Comment Section Sheet</Text>
            </BottomSheetView>
          </KeyboardAvoidingView>
        </BottomSheet>
      </View>
    </SafeAreaView>
  );
};

export default CommentSectionSheet;

`CollectionsSheet.tsx`

import React, { useCallback, useMemo, useState } from "react";
import {
  Platform,
  KeyboardAvoidingView,
  Keyboard,
  Text,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetView,
} from "@gorhom/bottom-sheet";

import useSheetManager from "../../hooks/useSheetManager";
import { cn } from "../../utils/cn";

const CollectionsSheet = () => {
  const { collectionsSheetRef } = useSheetManager();
  const snapPoints = useMemo(() => ["100%"], []);
  const [sheetOpen, setSheetOpen] = useState(false);

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
      />
    ),
    []
  );

  return (
    <SafeAreaView className={cn("flex-1 absolute inset-0", sheetOpen ? "" : "pointer-events-none")}>
      <View className="flex-1 relative">
        <BottomSheet
          ref={collectionsSheetRef}
          index={-1}
          snapPoints={snapPoints}
          enablePanDownToClose
          backdropComponent={renderBackdrop}
          onChange={(state) => {
            setSheetOpen(state > -1);
            if (state === -1) {
              Keyboard.dismiss();
            }
          }}
        >
          <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} className="flex-1">
            <BottomSheetView className="flex-1">
              <Text>Collections Sheet</Text>
            </BottomSheetView>
          </KeyboardAvoidingView>
        </BottomSheet>
      </View>
    </SafeAreaView>
  );
};

export default CollectionsSheet;

Step 2: Integrate the Sheets in `app/_layout.tsx`

Now, we need to integrate these sheets into our app layout so they can be accessed globally. Modify app/_layout.tsx as follows:

import "../global.css";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import "react-native-reanimated";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { ReplykeProvider } from "@replyke/expo";
import { SheetManagerProvider } from "../context/SheetManagerContext";
import CommentSectionSheet from "../components/shared/CommentSectionSheet";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import CollectionsSheet from "../components/shared/CollectionsSheet";

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <GestureHandlerRootView>
      <ReplykeProvider projectId={process.env.EXPO_PUBLIC_REPLYKE_PROJECT_ID!}>
        <SheetManagerProvider>
          <SafeAreaProvider>
            <SafeAreaView className="flex-1">
              <Stack screenOptions={{ headerShown: false }}>
                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
              </Stack>
              <CommentSectionSheet />
              <CollectionsSheet />
            </SafeAreaView>
            <StatusBar style="dark" />
          </SafeAreaProvider>
        </SheetManagerProvider>
      </ReplykeProvider>
    </GestureHandlerRootView>
  );
}

Step 3: Wire Up the Buttons in `PostActions.tsx`

Modify PostActions.tsx to use the useSheetManager hook:

const { openCommentSectionSheet, openCollectionsSheet } = useSheetManager();

{/* OPEN COMMENT SECTION */}
<TouchableOpacity onPress={() => openCommentSectionSheet?.(entity.id)} className="items-center gap-1.5">
  <Ionicons name="chatbubble" size={36} color="#ffffff" />
  {(entity.repliesCount || 0) > 0 && <Text className="text-[#9ca3af]">{entity.repliesCount}</Text>}
</TouchableOpacity>

{/* BOOKMARK BUTTON */}
<TouchableOpacity onPress={() => openCollectionsSheet?.(entity.id)}>
  <FontAwesome name="bookmark" size={32} color="#ffffff99" />
</TouchableOpacity>

Save your work, and now when you click the buttons, the respective sheets should open!

Integrating the Comment Section Sheet

Step 1: Extend useSheetManager

Modify your CommentSectionSheet.tsx to include additional values from useSheetManager:

const { commentSetionSheetRef, commmentsEntityId, closeCommentSectionSheet } =
  useSheetManager();

Step 2: Install Required Dependency

Run the following command to install the Replyke comment section package:

npx expo install @replyke/comments-social-react-native

Step 3: Configure the Comment Section

The useSocialComments hook requires a style object and a callbacks object.

Style Object

To get the default styles:

const styleConfig = useSocialStyle();

To customize specific styles:

const customStyles = useMemo<Partial<UseSocialStyleProps>>(
  () => ({
    newCommentFormProps: {
      verticalPadding: 16,
      paddingLeft: 24,
      paddingRight: 24,
    },
  }),
  []
);
const styleConfig = useSocialStyle(customStyles);

Callbacks Object

These callbacks handle user interactions outside the comment section:

const callbacks: SocialStyleCallbacks = useMemo(
  () => ({
    currentUserClickCallback: () => {
      Keyboard.dismiss();
      closeCommentSectionSheet?.();
      router.navigate("/(tabs)/profile");
    },
    otherUserClickCallback: (userId: string) => {
      Keyboard.dismiss();
      closeCommentSectionSheet?.();
      router.navigate(`/account/${userId}`);
    },
    loginRequiredCallback: () => {
      Alert.alert(
        "Oops! Login Required. Please sign in or create an account to continue."
      );
    },
  }),
  []
);

Step 4: Retrieve the Comment Section Components

const { CommentSectionProvider, CommentsFeed, NewCommentForm, SortByButton } =
  useSocialComments({
    entityId: commmentsEntityId,
    styleConfig,
    callbacks,
  });

Step 5: Replace Placeholder with the Comment Section

Replace:

<Text>Comment Section Sheet</Text>

With:

<CommentSectionProvider>
  <View className="flex-row gap-2 px-4 items-center mb-2">
    <View className="flex-1" />
    <SortByButton priority="top" activeView={<Text className="bg-black py-2 px-3 rounded-md text-white text-sm">Top</Text>} nonActiveView={<Text className="bg-gray-200 py-2 px-3 rounded-md text-sm">Top</Text>} />
    <SortByButton priority="new" activeView={<Text className="bg-black py-2 px-3 rounded-md text-white text-sm">New</Text>} nonActiveView={<Text className="bg-gray-200 py-2 px-3 rounded-md text-sm">New</Text>} />
  </View>
  <CommentsFeed />
  <NewCommentForm ref={commentFormRef} />
</CommentSectionProvider>

Step 6: Auto-focus the Comment Input

To automatically open the keyboard:

const commentFormRef = useRef<{ focus: () => void } | null>(null);

useEffect(() => {
  if (!commmentsEntityId) return;
  const timeout = setTimeout(() => {
    if (commentFormRef.current) {
      commentFormRef.current.focus();
    }
  }, 1000);
  return () => clearTimeout(timeout);
}, [commmentsEntityId]);

Pass the ref to NewCommentForm:

<NewCommentForm ref={commentFormRef} />

With this, the comment section is fully functional. Users can now open comment sections for each post independently.

This should be our final CommentSectionSheet component:

import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  Platform,
  KeyboardAvoidingView,
  Keyboard,
  Text,
  View,
  Alert,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetView,
} from "@gorhom/bottom-sheet";
import {
  SocialStyleCallbacks,
  useSocialComments,
  useSocialStyle,
  UseSocialStyleProps,
} from "@replyke/comments-social-react-native";
import { useRouter } from "expo-router";

import useSheetManager from "../../hooks/useSheetManager";
import { cn } from "../../utils/cn";

const CommentSectionSheet = () => {
  const router = useRouter();

  const { commentSetionSheetRef, commmentsEntityId, closeCommentSectionSheet } =
    useSheetManager();

  const snapPoints = useMemo(() => ["100%"], []);
  const [sheetOpen, setSheetOpen] = useState(false);

  const customStyles = useMemo<Partial<UseSocialStyleProps>>(
    () => ({
      newCommentFormProps: {
        verticalPadding: 16,
        paddingLeft: 24,
        paddingRight: 24,
      },
    }),
    []
  );
  const styleConfig = useSocialStyle(customStyles);

  const callbacks: SocialStyleCallbacks = useMemo(
    () => ({
      currentUserClickCallback: () => {
        Keyboard.dismiss();
        closeCommentSectionSheet?.();
        router.navigate("/(tabs)/profile");
      },
      otherUserClickCallback: (userId: string) => {
        Keyboard.dismiss();
        closeCommentSectionSheet?.();
        router.navigate(`/account/${userId}`);
      },
      loginRequiredCallback: () => {
        Alert.alert(
          "Oops! Login Required. Please sign in or create an account to continue."
        );
      },
    }),
    []
  );

  const { CommentSectionProvider, CommentsFeed, NewCommentForm, SortByButton } =
    useSocialComments({
      entityId: commmentsEntityId,
      styleConfig,
      callbacks,
    });

  const commentFormRef = useRef<{ focus: () => void } | null>(null);

  useEffect(() => {
    if (!commmentsEntityId) return;
    const timeout = setTimeout(() => {
      if (commentFormRef.current) {
        commentFormRef.current.focus();
      }
    }, 1000);
    return () => clearTimeout(timeout);
  }, [commmentsEntityId]);

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
      />
    ),
    []
  );
  return (
    <SafeAreaView
      className={cn(
        "flex-1 absolute inset-0",
        sheetOpen ? "" : "pointer-events-none"
      )}
    >
      <View className="flex-1 relative">
        <BottomSheet
          ref={commentSetionSheetRef}
          index={-1}
          snapPoints={snapPoints}
          enablePanDownToClose
          backdropComponent={renderBackdrop}
          onChange={(state) => {
            setSheetOpen(state > -1);
            if (state === -1) {
              Keyboard.dismiss();
            }
          }}
        >
          <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            className="flex-1"
          >
            <BottomSheetView className="flex-1">
              <CommentSectionProvider>
                <View className="flex-row gap-2 px-4 items-center mb-2">
                  <View className="flex-1" />
                  <SortByButton
                    priority="top"
                    activeView={
                      <Text className="bg-black py-2 px-3 rounded-md text-white text-sm">
                        Top
                      </Text>
                    }
                    nonActiveView={
                      <Text className="bg-gray-200 py-2 px-3 rounded-md text-sm">
                        Top
                      </Text>
                    }
                  />
                  <SortByButton
                    priority="new"
                    activeView={
                      <Text className="bg-black py-2 px-3 rounded-md text-white text-sm">
                        New
                      </Text>
                    }
                    nonActiveView={
                      <Text className="bg-gray-200 py-2 px-3 rounded-md text-sm">
                        New
                      </Text>
                    }
                  />
                </View>

                <CommentsFeed />
                <NewCommentForm ref={commentFormRef} />
              </CommentSectionProvider>
            </BottomSheetView>
          </KeyboardAvoidingView>
        </BottomSheet>
      </View>
    </SafeAreaView>
  );
};

export default CommentSectionSheet;

Finalizing the Collections Sheet Component

Step 1: Organizing the Files

To keep the CollectionsSheet component structured, we:

Move CollectionsSheet.tsx into a new CollectionsSheet/ folder
Create an index.ts file inside CollectionsSheet/ with the following content:

import CollectionsSheet from "./CollectionsSheet";
export default CollectionsSheet;

Now, the import path remains unchanged.

Step 2: Creating Supporting Components

CollectionsSheetHeader.tsx

Manages the top bar of the sheet, handling collection actions like navigating back, renaming collections, or saving/removing items.

import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, TextInput } from "react-native";
import { handleError, useLists } from "@replyke/expo";
import { cn } from "../../../utils/cn";
import useSheetManager from "../../../hooks/useSheetManager";

const styles = {
  button: "py-2 px-4 bg-gray-300 rounded-xl",
  buttonActive: "py-2 px-4 bg-blue-500 rounded-xl",
  textCancel: "text-left text-lg font-medium text-gray-500",
  textAction: "text-right text-lg font-medium",
  headerText: "flex-1 text-xl font-medium text-center text-stone-700",
  container: "flex-row py-4 px-4 items-center gap-2",
};

const CollectionsSheetHeader = ({
  isCreateListView,
  setIsCreateListView,
  newListName,
  setNewListName,
}: {
  isCreateListView: boolean;
  setIsCreateListView: React.Dispatch<React.SetStateAction<boolean>>;
  newListName: string;
  setNewListName: React.Dispatch<React.SetStateAction<string>>;
}) => {
  const {
    currentList,
    isEntityInList,
    goBack,
    addToList,
    removeFromList,
    createList,
    updateList,
  } = useLists();
  const { collectionsEntityId: entityId } = useSheetManager();

  const [isEditingName, setIsEditingName] = useState(false);
  const [updatedListName, setUpdatedListName] = useState("");

  useEffect(() => {
    if (!currentList) return;
    setUpdatedListName(currentList.name);
  }, [currentList]);

  const handleCreateList = async (): Promise<void> => {
    try {
      setIsCreateListView(false);
      if (newListName.length > 2) {
        await createList?.({ listName: newListName });
      }
      setNewListName("");
    } catch (err) {
      handleError(err, "Failed to create list: ");
    }
  };

  const renderLeftButton = () => {
    if (isCreateListView) {
      return (
        <TouchableOpacity
          onPress={() => setIsCreateListView(false)}
          className={styles.button}
        >
          <Text className={styles.textCancel}>Cancel</Text>
        </TouchableOpacity>
      );
    }

    if (currentList?.parentId) {
      return (
        <TouchableOpacity onPress={() => goBack?.()} className={styles.button}>
          <Text className={styles.textCancel}>Back</Text>
        </TouchableOpacity>
      );
    }

    return <View className="w-1/4" />;
  };

  const renderRightButton = () => {
    if (isCreateListView) {
      return (
        <TouchableOpacity
          onPress={handleCreateList}
          className={
            newListName.length > 2 ? styles.buttonActive : styles.button
          }
        >
          <Text
            className={cn(
              styles.textAction,
              newListName.length > 2 ? "text-white" : "text-gray-500"
            )}
          >
            Create
          </Text>
        </TouchableOpacity>
      );
    }

    if (entityId && isEntityInList?.(entityId)) {
      return (
        <TouchableOpacity
          onPress={() => removeFromList?.({ entityId })}
          className={cn(styles.button, "bg-transparent")}
        >
          <Text className={cn(styles.textAction, "text-red-300")}>Remove</Text>
        </TouchableOpacity>
      );
    }

    return (
      <TouchableOpacity
        onPress={() => entityId && addToList?.({ entityId })}
        className={styles.buttonActive}
      >
        <Text className={cn(styles.textAction, "text-white")}>Save</Text>
      </TouchableOpacity>
    );
  };

  if (isEditingName) {
    return (
      <View className={styles.container}>
        <TextInput
          value={updatedListName}
          onChangeText={setUpdatedListName}
          placeholder="Change List Name"
          className="border border-gray-400 rounded-2xl py-2.5 px-4 flex-1"
          numberOfLines={1}
          multiline={false}
          style={{ lineHeight: 24 }}
        />
        <TouchableOpacity
          onPress={() => {
            setIsEditingName(false);
            setUpdatedListName(currentList?.name || "");
          }}
          className={styles.button}
        >
          <Text className={styles.textCancel}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            if (updatedListName.length <= 2) return;
            if (!entityId) return;
            if (!currentList) return;
            updateList?.({
              listId: currentList.id,
              update: { name: updatedListName },
            });
            setIsEditingName(false);
          }}
          className={styles.button}
        >
          <Text
            className={cn(
              styles.textAction,
              updatedListName.length > 2 ? "text-blue-400" : "text-gray-500"
            )}
          >
            Save
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <View className={styles.container}>
      <View className="w-1/4 items-start">{renderLeftButton()}</View>
      <Text
        className={styles.headerText}
        onLongPress={() => {
          if (currentList?.parentId) setIsEditingName(true);
        }}
      >
        {isCreateListView
          ? "Create a Collection"
          : currentList?.parentId
          ? currentList.name
          : "Collections"}
      </Text>
      <View className="w-1/4 items-end">{renderRightButton()}</View>
    </View>
  );
};

export default CollectionsSheetHeader;

CurrentCollectionItems.tsx

Displays all entities inside the current collection.

import React from "react";
import { Image, View, FlatList } from "react-native";
import { useLists } from "@replyke/expo";
import { Skeleton } from "@replyke/ui-core-react-native";

function CurrentCollectionItems() {
  const { currentList } = useLists();

  return (
    <View>
      {currentList ? (
        <FlatList
          data={currentList?.entities}
          keyExtractor={(item) => item.id!}
          renderItem={({ item: entity }) => (
            <Image
              source={{ uri: entity.media?.[0].publicPath }}
              className="size-20 rounded-xl"
              resizeMode="cover"
            />
          )}
          contentContainerStyle={{ padding: 14 }}
        />
      ) : (
        <FlatList
          data={[1, 2]}
          keyExtractor={(item) => item.toString()}
          renderItem={() => (
            <View className="flex-row gap-3 px-4 py-2.5 items-center">
              <Skeleton
                style={{
                  height: 36,
                  width: 36,
                  borderRadius: 20,
                  backgroundColor: "#d1d5db",
                }}
              />
              <Skeleton
                style={{
                  height: 10,
                  width: "70%",
                  borderRadius: 6,
                  backgroundColor: "#d1d5db",
                }}
              />
            </View>
          )}
        />
      )}
    </View>
  );
}

export default CurrentCollectionItems;

CreateNewCollection.tsx

Provides an interface for users to create a new collection.

import React from "react";
import { Text, TextInput, TouchableOpacity, View } from "react-native";

function CreateNewCollection({
  isCreateCollectionView,
  setIsCreateCollectionView,
  newCollectionName,
  setNewCollectionName,
}: {
  isCreateCollectionView: boolean;
  setIsCreateCollectionView: (state: boolean) => void;
  newCollectionName: string;
  setNewCollectionName: (value: string) => void;
}) {
  return (
    <View className="border-t border-b border-gray-300 p-3 mt-3">
      {isCreateCollectionView ? (
        <TextInput
          value={newCollectionName}
          onChangeText={setNewCollectionName}
          placeholder="Create a collection.."
          placeholderTextColor="#9ca3af"
          className="bg-gray-200 rounded-2xl p-4 text-gray-600"
        />
      ) : (
        <TouchableOpacity onPress={() => setIsCreateCollectionView(true)}>
          <Text className="text-lg font-medium text-blue-500 m-2">
            Create a new collection
          </Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

export default CreateNewCollection;

SubCollectionsList.tsx

Lists sub-collections within the current collection, allowing navigation.

import React from "react";
import { FlatList, Pressable, Text, View } from "react-native";
import Entypo from "@expo/vector-icons/Entypo";
import { useLists } from "@replyke/expo";
import { Skeleton } from "@replyke/ui-core-react-native";

function SubCollectionsList() {
  const { subLists, loading, openList } = useLists();

  return (
    <View className="py-5">
      {loading ? (
        <FlatList
          data={[1, 2]}
          keyExtractor={(item) => item.toString()}
          renderItem={() => (
            <View className="flex-row gap-3 px-4 py-2.5 items-center">
              <Skeleton
                style={{
                  height: 36,
                  width: 36,
                  borderRadius: 20,
                  backgroundColor: "#d1d5db",
                }}
              />
              <Skeleton
                style={{
                  height: 10,
                  width: "70%",
                  borderRadius: 6,
                  backgroundColor: "#d1d5db",
                }}
              />
            </View>
          )}
        />
      ) : (
        <FlatList
          data={subLists}
          keyExtractor={(item) => item.id}
          renderItem={({ item: subList }) => (
            <Pressable
              onPress={() => openList?.(subList)}
              className="px-4 py-2.5 flex-row gap-3 items-center"
            >
              <View className="bg-gray-700 p-2 rounded-2xl">
                <Entypo name="list" size={20} color="#fff" />
              </View>
              <Text>{subList.name}</Text>
            </Pressable>
          )}
        />
      )}
    </View>
  );
}

export default SubCollectionsList;

Step 3: Implementing `CollectionsSheet.tsx`

The final component integrates all the sub-components and ensures they work within the ListsProvider.

import React, { useCallback, useMemo, useState } from "react";
import { Platform, KeyboardAvoidingView, Keyboard, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetView,
} from "@gorhom/bottom-sheet";

import useSheetManager from "../../../hooks/useSheetManager";
import { cn } from "../../../utils/cn";
import CollectionsSheetHeader from "./CollectionsSheetHeader";
import SubCollectionsList from "./SubCollectionsList";
import CreateNewCollection from "./CreateNewCollection";
import CurrentCollectionItems from "./CurrentCollectionItems";
import { ListsProvider } from "@replyke/expo";

const CollectionsSheet = () => {
  const { collectionsSheetRef } = useSheetManager();
  const [isCreateCollectionView, setIsCreateCollectionView] = useState(false);
  const [newCollectionName, setNewCollectionName] = useState("");

  const snapPoints = useMemo(() => ["100%"], []);

  const [sheetOpen, setSheetOpen] = useState(false);

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
      />
    ),
    []
  );
  return (
    <SafeAreaView
      className={cn(
        "flex-1 absolute inset-0",
        sheetOpen ? "" : "pointer-events-none"
      )}
    >
      <View className="flex-1 relative">
        <BottomSheet
          ref={collectionsSheetRef}
          index={-1}
          snapPoints={snapPoints}
          enablePanDownToClose
          backdropComponent={renderBackdrop}
          onChange={(state) => {
            setSheetOpen(state > -1);
            if (state === -1) {
              Keyboard.dismiss();
            }
          }}
        >
          <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            className="flex-1"
          >
            <BottomSheetView className="flex-1">
              <ListsProvider>
                <CollectionsSheetHeader
                  newListName={newCollectionName}
                  setNewListName={setNewCollectionName}
                  isCreateListView={isCreateCollectionView}
                  setIsCreateListView={setIsCreateCollectionView}
                />

                <CurrentCollectionItems />

                <CreateNewCollection
                  isCreateCollectionView={isCreateCollectionView}
                  setIsCreateCollectionView={setIsCreateCollectionView}
                  newCollectionName={newCollectionName}
                  setNewCollectionName={setNewCollectionName}
                />

                <SubCollectionsList />
              </ListsProvider>
            </BottomSheetView>
          </KeyboardAvoidingView>
        </BottomSheet>
      </View>
    </SafeAreaView>
  );
};

export default CollectionsSheet;

Features Completed

By passing an entity id when opening the sheet, our sheet shows us the correct action in regards to the entity and current collection.
Users can view all items inside the collection.
Users can create new collections.
A list of sub-collections allows easy navigation.
Users can rename collections (except the root collection).

With this, the collections feature is fully implemented!

Wrapping Up

Throughout this chapter, we’ve transformed our social feed from a static display into an interactive experience. We started by making user avatars clickable, allowing seamless navigation between profiles. Then, we brought likes to life, enabling users to express appreciation for posts with real-time feedback. Next, we integrated the comment section, where users can view and engage in discussions, complete with Replyke’s comment system for a smooth experience. Finally, we built the Collections Sheet, allowing users to save posts, navigate collections, and create new ones—all while keeping everything organized within an intuitive bottom sheet.

With these essential interactions in place, our app now feels much closer to a real social platform. But we’re just getting started! In the next part, we’ll focus on user profiles, adding details, customization, and interactions to make them truly engaging. Stay tuned as we continue building the core of our social experience! 🚀

Stay Updated

Don’t forget to join the Discord server where I post free boilerplate code repos for different types of social networks. Updates about the next article and additional resources will also be shared there. Lastly, follow me for updates here and on X/Twitter & BlueSky.

How to Add a Comment Section to your React Native App (Expo/CLI)

Tsabary — Tue, 28 Jan 2025 16:07:58 +0000

In this article, I'll show you exactly how to integrate a comment section into your React Native app using an Expo-managed workflow. But here's the kicker—this implementation works just as seamlessly in a CLI workflow too. Soon I will release a very similar guide for implementing the same comment section in a React JS app.
By the end of this guide, you'll have a dynamic comment section up and running in no time, leveraging the power of Expo, TypeScript, and NativeWind for styling.

Here's a little preview:

For the comment section itself, we’ll be using Replyke, a versatile tool that brings a host of exciting features to the table:

Mentions to tag users directly.
Threaded replies to keep conversations structured.
Likes for instant feedback.
Highlighted comments and replies for emphasis.
GIF support to add personality.
Built-in authorization to ensure only authenticated users can interact.
User reporting to flag inappropriate content.
A powerful back office for moderation, allowing you to easily manage flagged content and take action when needed.

These features make Replyke more than just a comment section—it’s a tool for building community and trust within your app.

To keep things simple and focused, we’ll use static dummy data for our entities (e.g posts or articles) and a logged-in user. In a production environment, you’d connect this to your dynamic content and user management system, but the implementation steps remain identical.

Part 1 is for basic setup for those who start from scratch for the sake of this tutorial. If you already have an existing app you can skip this step. That said, it is recommended to follow this guide as a separate app for a smooth experience, and simply copy any code to your own app when done.

At the end of every major milestone you would find a link to GitHub with the source code up to that point.

Part 1: Basic repository setup

Step 1: Creating the Expo App

To begin, navigate to the directory where you want to create your repository. Open your terminal and run the following command:

npx create-expo-app@latest

Follow the prompts to configure your project. Once the setup is complete, navigate into the newly created repository:

cd <your-repo-name>

Open the project in your IDE of choice, such as Visual Studio Code.

Step 2: Cleaning Up the Project Structure

We want to start with a clean slate, so let’s tidy up the default files and folders created by Expo.

Remove Unnecessary Files

Components, Constants, and Hooks: Delete the contents of the components, constants, and hooks folders.
Scripts Folder: Delete the scripts folder located at the root of your project (which contains reset-project.js).

Clean Up Screens in the `app` Folder

Inside the app folder, remove screens you won’t be using. Remove the (tabs) folder completely.
For the remaining screens, clear out their contents, leaving placeholders or empty functional components as needed.

Final Folder Structure

After this cleanup, your project structure should look like this:

.gitignore
app
  ├─ _layout.tsx
  └─ index.tsx

app.json
assets
  ├─ fonts
  │   └─ SpaceMono-Regular.ttf
  └─ images
      ├─ adaptive-icon.png
      ├─ icon.png
      └─ splash-icon.png
components
constants
hooks
package-lock.json
package.json
README.md
tsconfig.json

This streamlined setup ensures we stay focused and keep our project organized as we build out the app.

Cleaned Up Files

Here are the cleaned-up contents of the key files:

`app/_layout.tsx`

import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import { View } from "react-native";
import "react-native-reanimated";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <View>
      <Stack>
        <Stack.Screen name="index" options={{ headerShown: false }} />
      </Stack>
      <StatusBar style="auto" />
    </View>
  );
}

`app/index.tsx`

import { View } from "react-native";

export default function HomeScreen() {
  return <View></View>;
}

This streamlined setup ensures we stay focused and keep our project organized as we build out the app.

Step 3: Setting Up NativeWind

NativeWind is a library that brings the simplicity and power of Tailwind CSS to React Native. Tailwind CSS is a utility-first CSS framework that allows you to rapidly build modern and responsive designs by applying pre-defined utility classes directly to your components. NativeWind adapts this for React Native, enabling you to style your app with ease and consistency.

Configuration Steps

Follow the NativeWind Setup Guide: Use the NativeWind setup guide and select the Expo setup. Make sure to follow the latest version, as this tutorial is based on Expo SDK 52 at the time of writing.

Update the Tailwind Config File: Ensure your tailwind.config.js includes the components folder in addition to the app folder

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create and Import the globals.css File: At the root of your project (same level as package.json), create a file named globals.css. Copy the content from the NativeWind guide into this file. Then, import it at the top of app/_layout.tsx:
```
import "../globals.css";
```
Generate and Edit babel.config.js: If your project doesn’t include a babel.config.js file (as Expo hides it by default), generate one by running:
```
npx expo customize
```
Select the babel.config.js option using the space bar and hit Enter. Once generated, copy the content from the NativeWind guide into this file.
Generate and Edit metro.config.js: Similarly, if your project lacks a metro.config.js file, generate it using the same steps. Copy the content from the NativeWind guide into this file as well.
Edit app.json: The NativeWind guide includes instructions for modifying the web section in the app.json file. However, since we are building for mobile only, you can safely remove the entire web section. Your app.json file should now look like this, with the rest of its content untouched:
```
{
  "expo": {
    // other configurations here
  }
}
```
TypeScript Configuration (Required): Create a file named nativewind-env.d.ts at the root of your project with the following content:
```
/// <reference types="nativewind/types" />
```
This step is required for proper type support in our TypeScript-based app.

Verification

Before running your app, ensure you’ve updated the screen files to the following:

`app/_layout.tsx`

<View className="flex-1">
  <Stack>
    <Stack.Screen name="index" options={{ headerShown: false }} />
  </Stack>
  <StatusBar style="auto" />
</View>

`app/index.tsx`

<View className="bg-red-500 flex-1">
  <Text>Hello World</Text>
</View>

Once these steps are complete, start your app with the following command:

npx expo start

You should now see an ugly red screen with a Hello World text in the top left corner (it will be behind the status bar as it’s outside the safe area), and a tab navigation bar at the bottom with a single tab. At this point, we’re almost done!

Step 4: Setting Up SafeAreaProvider and SafeAreaView

Lastly, we will incorporate the SafeAreaProvider and SafeAreaView components into our app, which are part of the react-native-safe-area-context library. These components help ensure that your content is displayed within the safe area boundaries of a device, avoiding overlaps with the status bar, notch, or other UI elements.

SafeAreaProvider: This component provides the context for safe area boundaries and should wrap your entire application.
SafeAreaView: This component applies the safe area insets to its children. It can be used selectively for specific screens or layouts where you want to ensure the content is contained within the safe area.

For simplicity, in this tutorial, we’ll wrap the entire app with SafeAreaView. Here's how to integrate it:

Import SafeAreaProvider and SafeAreaView into app/_layout.tsx:

import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

Update the app/_layout.tsx file to wrap your app as follows:

<SafeAreaProvider>
      <SafeAreaView className="flex-1">
        <Stack>
          <Stack.Screen name="index" options={{ headerShown: false }} />
        </Stack>
      </SafeAreaView>
      <StatusBar style="auto" />
</SafeAreaProvider>

By wrapping the app with SafeAreaProvider and SafeAreaView, we ensure all screens respect the safe area. While it’s possible to use SafeAreaView selectively for specific screens, we are keeping it simple by applying it globally in this tutorial.

Once you’ve made these updates, update your app or simply re-run it using:

npx expo start

You should now see the red screen with a Hello World message, properly contained within the safe area and a tab navigation bar at the bottom.

Part 1 completed source code on GitHub for reference.

Part 2: Setting Up Replyke in Your Project

Steps:

Create a Project on Replyke Dashboard: Head over to dashboard.replyke.com, create an account if you don’t already have one, and start a new project. Once the project is created, copy the provided Project ID.
Install Replyke for Expo: Open your terminal and run the following command to install Replyke for your Expo project:
```
npx expo install @replyke/expo
```
Note: The correct package for Expo-managed workflows is @replyke/expo. You might see references to @replyke/react-native in some documentation — that package is intended for React Native CLI projects.
Wrap Your App with ReplykeProvider: In your app/_layout file, wrap your app’s content with the ReplykeProvider component from Replyke. Pass the Project ID you copied earlier as the projectId prop. This initializes Replyke within your app.

Here’s how the return statement of your app/_layout file should look after making these changes:

export default function Layout() {
  return (
    <ReplykeProvider projectId={process.env.EXPO_PUBLIC_REPLYKE_PROJECT_ID!}>
      <SafeAreaProvider>
        <SafeAreaView className="flex-1">
          <Stack
            screenOptions={{
              headerShown: false,
            }}
          >
            <Stack.Screen name="index" options={{ headerShown: false }} />
          </Stack>
        </SafeAreaView>
        <StatusBar style="dark" />
      </SafeAreaProvider>
    </ReplykeProvider>
  );
}

With these steps completed, Replyke is now set up and ready to power your comment section.

Part 3: Creating Dummy Data

Create a Constants Folder: Inside your project’s src directory, create a folder named constants.
Add the Dummy Data File: In the constants folder, create a new file called dummy-data.ts and paste the following code:

    // Dummy data for posts
    const posts = [
      { id: "post1", content: "This is the first post." },
      { id: "post2", content: "Hello world! This is post two." },
      { id: "post3", content: "Another day, another post." },
      { id: "post4", content: "Simple content for post four." },
      { id: "post5", content: "Post five is here." },
      { id: "post6", content: "Sharing thoughts in post six." },
      { id: "post7", content: "This is the seventh post." },
      { id: "post8", content: "Post eight with simple text." },
      { id: "post9", content: "The ninth post is ready." },
      { id: "post10", content: "Finally, this is the tenth post." },
    ];

    // Dummy data for users
    const users = [
      { id: "user1", username: "john123" },
      { id: "user2", username: "emma456" },
      { id: "user3", username: "mike789" },
      { id: "user4", username: "sarah202" },
      { id: "user5", username: "daniel567" },
      { id: "user6", username: "chris88" },
      { id: "user7", username: "lucy999" },
      { id: "user8", username: "kate77" },
      { id: "user9", username: "noah321" },
      { id: "user10", username: "olivia654" },
    ];

    export { posts, users };

Save and Import the Dummy Data: With the dummy data file in place, we can now use these posts and users in our app to simulate interactions. In the next section, we’ll configure the signedToken prop and integrate the comment section with this data.

Render posts

Lastly, let's present our dummy posts in our home screen in a nice list. Replace the contents of app/index.tsx with the following:

import { Text, View, FlatList, TouchableOpacity } from "react-native";
import { posts } from "../constants/dummy-data";

export default function HomeScreen() {
  return (
    <View className="bg-gray-100 flex-1 p-4">
      <FlatList
        data={posts}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View className="bg-white p-4 mb-4 rounded-xl shadow-lg">
            <Text className="text-lg font-bold text-gray-800">{item.id}</Text>
            <Text className="text-gray-600 mt-2">{item.content}</Text>
            <TouchableOpacity
              className="bg-blue-500 mt-4 p-3 rounded-lg"
              onPress={() => console.log(`Open comments for ${item.id}`)}
            >
              <Text className="text-white text-center font-medium">
                Open Discussion
              </Text>
            </TouchableOpacity>
          </View>
        )}
      />
    </View>
  );
}

You should now see all of our dummy posts when you open the app.

Parts 2 and 3 completed source code on GitHub for reference.

Part 4: Implementing the Comment Section

Now that we have our project set up, it’s time to implement the comment section. To do so, we will user Replyke's social comments section for React Native and @gorhom/bottom-sheet for displaying the content in a bottom sheet, which works perfectly for our comment section.

Installing Dependencies

To get started, install the required dependencies:

npx expo install @replyke/comments-social-react-native @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler

Note: React Native Gesture Handler v3 and React Native Reanimated v3 require additional setup steps. Follow their respective installation guides:

React Native Gesture Handler Installation

React Native Reanimated Installation

Additionally, ensure your app is wrapped with GestureHandlerRootView in app/_layout.tsx as follows:

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function Layout() {
  return (
    <GestureHandlerRootView>
      <ReplykeProvider projectId={process.env.EXPO_PUBLIC_REPLYKE_PROJECT_ID!}>
        <SafeAreaProvider>
          <SafeAreaView className="flex-1">
            <Stack
              screenOptions={{
                headerShown: false,
              }}
            >
              <Stack.Screen name="index" options={{ headerShown: false }} />
            </Stack>
          </SafeAreaView>
          <StatusBar style="dark" />
        </SafeAreaProvider>
      </ReplykeProvider>
    </GestureHandlerRootView>
  );
}

Creating the Comment Section Component

Next, create a new file called CommentSectionSheet.tsx inside your components folder. This file will define the bottom sheet UI for the comment section. Add the following code:

import React, {
  forwardRef,
  useCallback,
  useEffect,
  useMemo,
  useRef,
} from "react";
import { View, Text, Platform, KeyboardAvoidingView } from "react-native";
import {
  useSocialComments,
  useSocialStyle,
  UseSocialStyleProps,
} from "@replyke/expo";
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetView,
} from "@gorhom/bottom-sheet";

const CommentSectionSheet = forwardRef<
  BottomSheet,
  { referenceId: string | null; handleClose: () => void }
>(
  (
    {
      referenceId,
      handleClose,
    }: { referenceId: string | null; handleClose: () => void },
    ref
  ) => {
    const snapPoints = useMemo(() => ["100%"], []);

    const customStyles = useMemo<Partial<UseSocialStyleProps>>(
      () => ({
        commentProps: {},
        newCommentFormProps: {
          verticalPadding: 16,
          paddingLeft: 24,
          paddingRight: 24,
        },
      }),
      []
    );
    const styleConfig = useSocialStyle(customStyles);

    const {
      CommentSectionProvider,
      CommentsFeed,
      NewCommentForm,
      SortByButton,
    } = useSocialComments({
      referenceId,
      styleConfig,
      createIfNotFound: true,
      callbacks: {
        loginRequiredCallback: () => {
          alert(
            "Oops! Login Required. Please sign in or create an account to continue."
          );
        },
      },
    });

    const commentFormRef = useRef<{ focus: () => void } | null>(null);

    useEffect(() => {
      if (!referenceId) return;
      const timeout = setTimeout(() => {
        if (commentFormRef.current) {
          commentFormRef.current.focus();
        }
      }, 1000);
      return () => clearTimeout(timeout);
    }, [referenceId]);

    const renderBackdrop = useCallback(
      (props: BottomSheetBackdropProps) => (
        <BottomSheetBackdrop
          {...props}
          disappearsOnIndex={-1}
          appearsOnIndex={0}
        />
      ),
      []
    );
    return (
      <BottomSheet
        index={-1}
        ref={ref} // Forwarding the ref here
        snapPoints={snapPoints}
        enablePanDownToClose
        backdropComponent={renderBackdrop}
        onClose={handleClose}
      >
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : "height"}
          className="flex-1"
        >
          <CommentSectionProvider>
            <BottomSheetView className="relative flex-1 h-full">
              <View className="flex-row gap-2 px-4 items-center mb-2">
                <View className="flex-1" />
                <SortByButton
                  priority="top"
                  activeView={
                    <Text className="bg-black py-2 px-3 rounded-md text-white text-sm">
                      Top
                    </Text>
                  }
                  nonActiveView={
                    <Text className="bg-gray-200 py-2 px-3 rounded-md text-sm">
                      Top
                    </Text>
                  }
                />
                <SortByButton
                  priority="new"
                  activeView={
                    <Text className="bg-black py-2 px-3 rounded-md text-white text-sm">
                      New
                    </Text>
                  }
                  nonActiveView={
                    <Text className="bg-gray-200 py-2 px-3 rounded-md text-sm">
                      New
                    </Text>
                  }
                />
              </View>

              <CommentsFeed />
              {/* <View className="border-t-hairline border-gray-300"> */}
              <NewCommentForm ref={commentFormRef} />
              {/* </View> */}
            </BottomSheetView>
          </CommentSectionProvider>
        </KeyboardAvoidingView>
      </BottomSheet>
    );
  }
);

export default CommentSectionSheet;

Explanation of the `CommentSectionSheet` Component

useSocialComments and referenceId:

The useSocialComments hook is configured to use the referenceId passed as a prop. This referenceId links the comments in Replyke with external data, like the posts from our dummy array.
When using external data, the createIfNotFound flag ensures that Replyke creates a new entity for comments if it doesn’t already exist.

Style Configuration:
The useSocialStyle hook provides a style configuration object for customizing the comment section’s appearance. We pass custom padding for the new comment form here.
Login Required Callback:
The loginRequiredCallback function alerts users to log in if they try to perform actions restricted to authenticated users.
commentFormRef and useEffect:
The commentFormRef is used to programmatically focus on the comment input field when the bottom sheet opens. A slight delay is introduced using setTimeout for better user experience.
Sort Buttons:
The two SortByButton components allow users to toggle between sorting comments by “Top” and “New.” Active and inactive states are styled differently for clarity.
Bottom Sheet Control:
The ref passed to the bottom sheet allows us to programmatically control its behavior from the parent component.

Updating the Home Screen

Finally, update your HomeScreen to include the comment section. Replace its content with the following:

import { useRef, useState } from "react";
import { Text, View, FlatList, TouchableOpacity } from "react-native";
import BottomSheet from "@gorhom/bottom-sheet";
import { posts } from "../constants/dummy-data";
import CommentSectionSheet from "../components/CommentSectionSheet";

export default function HomeScreen() {
  const bottomSheetRef = useRef<BottomSheet>(null);
  const [referenceId, setReferenceId] = useState<string | null>(null);

  const handleOpen = (newReferenceId: string) => {
    if (bottomSheetRef.current) {
      setReferenceId(newReferenceId);
      bottomSheetRef.current.expand(); // `expand` method now has TypeScript autocomplete
    }
  };

  const handleClose = () => {
    if (bottomSheetRef.current) {
      bottomSheetRef.current.close();
      setReferenceId(null);
    }
  };

  return (
    <View className="bg-gray-100 flex-1 p-4">
      <FlatList
        data={posts}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View className="bg-white p-4 mb-4 rounded-xl shadow-lg">
            <Text className="text-lg font-bold text-gray-800">{item.id}</Text>
            <Text className="text-gray-600 mt-2">{item.content}</Text>
            <TouchableOpacity
              className="bg-blue-500 mt-4 p-3 rounded-lg"
              onPress={() => handleOpen(item.id)}
            >
              <Text className="text-white text-center font-medium">
                Open Discussion
              </Text>
            </TouchableOpacity>
          </View>
        )}
      />
      <CommentSectionSheet
        ref={bottomSheetRef}
        referenceId={referenceId}
        handleClose={handleClose}
      />
    </View>
  );
}

With this setup, clicking the "Open Discussion" button on any card will open the corresponding comment section in a bottom sheet. You’ve now successfully implemented a modern, fully-featured comment section in your app!

Part 4 completed source code on GitHub for reference.

Part 5: Integrating Authentication with Replyke

Understanding Replyke's Authentication

Replyke offers a simple yet robust mechanism to integrate authentication. Here's how it works:

JWT Keys: Replyke requires project owners to generate a JWT key pair via the Replyke dashboard. This generates:
- A secret key (only visible once) for signing JWTs.
- A public key, which Replyke associates with the project for verification.
JWT Signing: Developers use the secret key to sign a JWT with logged-in user details. This JWT is passed to Replyke to verify its validity and trustworthiness.
Authenticated Actions: Once verified, Replyke associates the actions (comments, likes, etc.) with the authenticated user.

Critical Note on Security

Never store or use the secret key on the client side in production. Signing JWTs client-side is a major security risk.
In production, always implement JWT signing on your server. Replyke’s documentation provides detailed guidance on this.
For this tutorial, we’ll demonstrate a simplified implementation for testing and educational purposes only, using Replyke’s useSignTestingJwt hook.

Setting Up Environment Variables

Add your secret key as an environment variable in Expo:

EXPO_PUBLIC_REPLYKE_SECRET_KEY=your-secret-key
EXPO_PUBLIC_REPLYKE_PROJECT_ID=your-project-id

Use these variables in your app's _layout.tsx file for authentication setup.

Updated `app/_layout.tsx`

import "../global.css";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect, useState } from "react";
import "react-native-reanimated";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { ReplykeProvider, useSignTestingJwt } from "@replyke/expo";
import { GestureHandlerRootView } from "react-native-gesture-handler";

import { users } from "../constants/dummy-data";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

const projectId = process.env.EXPO_PUBLIC_REPLYKE_PROJECT_ID!;
const privateKey = process.env.EXPO_PUBLIC_REPLYKE_SECRET_KEY!;

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  const signTestingJwt = useSignTestingJwt();
  const [signedToken, setSignedToken] = useState<string>();

  const handleSignJwt = async () => {
    const payload = users[0]; // Using the first user from dummy data

    const token = await signTestingJwt({
      projectId,
      payload,
      privateKey,
    });
    setSignedToken(token);
  };

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  useEffect(() => {
    handleSignJwt();
  }, []);

  if (!loaded) {
    return null;
  }

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ReplykeProvider projectId={projectId} signedToken={signedToken}>
        <SafeAreaProvider>
          <SafeAreaView className="flex-1">
            <Stack
              screenOptions={{
                headerShown: false,
              }}
            >
              <Stack.Screen name="index" options={{ headerShown: false }} />
            </Stack>
          </SafeAreaView>
          <StatusBar style="dark" />
        </SafeAreaProvider>
      </ReplykeProvider>
    </GestureHandlerRootView>
  );
}

Logging Out

When a user signs out, we need to notify Replyke to clear the authenticated state. Use the signOut function from the useAuth hook:

import { useAuth } from "@replyke/expo";

const { signOut } = useAuth();
signOut?.();

This function should be called whenever a user logs out, and it is only available within the ReplykeProvider context.

Key Rotation

Reports and Moderation Tools

Part 5 completed source code on GitHub for reference.

Bonus Parts

This article doesn’t end here. In two bonus parts, we will explore how to:

Add GIF Functionality: Enhance user interactions by allowing them to post comments with GIFs, making conversations more engaging and lively.
Add Likes to Posts: Implement a simple and efficient like functionality for posts, encouraging user interaction and providing instant feedback.

Both features are super easy to implement using Replyke’s tools. Let’s dive into them next!

Bonus Part 1: Adding GIF Functionality

Enhancing user interactions with GIFs is incredibly easy using Replyke. Here's how:

Get a GIPHY API Key: Go to GIPHY and create a new API key.
Enable GIFs in Replyke:

Copy your API key.
Go to your project dashboard on Replyke.
Activate the GIF feature and paste your API key.

That's it! GIF support will now be enabled in your comment section, allowing users to search and post GIFs directly.

Bonus Part 2: Adding Likes to Posts

Implementing likes for posts is just as straightforward. Here's how:

Wrap Each Post with an EntityProvider: Update the FlatList in your HomeScreen to wrap each post with an EntityProvider.

import { EntityProvider } from "@replyke/expo";

<FlatList
  data={posts}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <EntityProvider referenceId={item.id} createIfNotFound key={item.id}>
      <SinglePost item={item} handleOpen={handleOpen} />
    </EntityProvider>
  )}
/>

Create a SinglePost Component: Create a new SinglePost component in your components directory.

import { View, Text, TouchableOpacity } from "react-native";
import React from "react";
import { useEntity } from "@replyke/expo";

const SinglePost = ({
  item,
  handleOpen,
}: {
  item: { id: string; content: string };
  handleOpen: (newReferenceId: string) => void;
}) => {
  const {
    entity,
    userDownvotedEntity,
    userUpvotedEntity,
    upvoteEntity,
    removeEntityUpvote,
    downvoteEntity,
    removeEntityDownvote,
  } = useEntity();

  const upvotesCount = entity?.upvotes.length || 0;
  const downvotesCount = entity?.downvotes.length || 0;

  const handleUpvote = () => {
    if (userUpvotedEntity) {
      removeEntityUpvote?.();
    } else {
      upvoteEntity?.();
    }
  };

  const handleDownvote = () => {
    if (userDownvotedEntity) {
      removeEntityDownvote?.();
    } else {
      downvoteEntity?.();
    }
  };

  return (
    <View className="bg-white p-4 mb-4 rounded-xl shadow-lg">
      <Text className="text-lg font-bold text-gray-800">{item.id}</Text>
      <Text className="text-gray-600 mt-2">{item.content}</Text>

      <View className="flex-row justify-between items-center mt-4">
        <TouchableOpacity
          className={`flex-row items-center p-3 rounded-lg ${
            userUpvotedEntity ? "bg-green-500" : "bg-gray-200"
          }`}
          onPress={handleUpvote}
        >
          <Text
            className={`font-medium ${
              userUpvotedEntity ? "text-white" : "text-gray-800"
            }`}
          >
            {userUpvotedEntity ? "Upvoted" : "Upvote"}
          </Text>
          <Text className="ml-2 text-sm text-gray-600">({upvotesCount})</Text>
        </TouchableOpacity>

        <TouchableOpacity
          className={`flex-row items-center p-3 rounded-lg ${
            userDownvotedEntity ? "bg-red-500" : "bg-gray-200"
          }`}
          onPress={handleDownvote}
        >
          <Text
            className={`font-medium ${
              userDownvotedEntity ? "text-white" : "text-gray-800"
            }`}
          >
            {userDownvotedEntity ? "Downvoted" : "Downvote"}
          </Text>
          <Text className="ml-2 text-sm text-gray-600">({downvotesCount})</Text>
        </TouchableOpacity>
      </View>

      <TouchableOpacity
        className="bg-blue-500 mt-4 p-3 rounded-lg"
        onPress={() => handleOpen(item.id)}
      >
        <Text className="text-white text-center font-medium">
          Open Discussion
        </Text>
      </TouchableOpacity>
    </View>
  );
};

export default SinglePost;

That's it! Your posts now support upvotes and downvotes.

Part 6 completed source code on GitHub for reference.

Wrapping Up

Stay Updated

How to Build a Social Network in 1 Day: Part 6 - Adding a Feed

Tsabary — Mon, 27 Jan 2025 14:47:39 +0000

In the previous chapter of this tutorial, we brought our Create Post feature to life. This involved building out components to request camera permissions, capture or select images, preview the photos, and finalize posts with captions. To ensure better performance, we also introduced an image resizing utility function, which streamlined handling larger files.

Now, with the ability to create posts in place, it’s time to give users a way to view their content. In this chapter, we’ll focus on creating the foundation of the feed, where posts will be displayed. This involves designing the UI for how a single post will look, complete with buttons for likes, comments, bookmarks, and user avatars. By the end of this section, users will be able to scroll through posts they’ve created in a visually appealing and functional feed interface.

It’s important to note that while we’ll add these interactive buttons to the post UI, they won’t be wired up to any functionality just yet. That will come in later chapters when we implement features like likes, comments, and bookmarks. For now, the focus is on laying the groundwork and getting the visual elements in place.

Accumulated reading time so far: 30 minutes.

Part 6 completed repo on GitHub for reference

Updating the Home Screen

Before updating the Home screen with the feed functionality, it’s important to preserve any existing functionality. If your current Home screen includes buttons for signing in and out of the application, move that functionality to the Profile screen (app/(tabs)/profile/index.tsx). This ensures that the sign-in and sign-out features remain accessible as we transition the Home screen into a feed.

To do this:

Open the app/(tabs)/index.tsx file and locate the existing code for the sign-in and sign-out buttons.
Cut this code and paste it into app/(tabs)/profile/index.tsx.

Once you’ve moved this functionality, you’re ready to replace the code in the Home screen with the following:

import React from "react";
import { FeedProvider } from "@replyke/expo";
import Feed from "../../components/home/Feed";

const Home = () => {
  return (
    <FeedProvider sortBy="hot">
      <Feed />
    </FeedProvider>
  );
};

export default Home;

What This New Code Does

FeedProvider: This is a context provider that will give all of its child components access to feed data and functionality. We’ve set the sortBy prop to "hot," which means the "hottest" posts will appear higher in our feed. The scoring system for "hot" is handled automatically by Replyke, so you don’t need to worry about implementing it yourself.
Feed: This component will handle the UI of the feed. It will use a FlatList to render individual posts, which we will implement in the next steps.

By moving the sign-in and sign-out functionality to the Profile screen and updating the Home screen, you’ve set the stage for building the feed UI. Let’s proceed to implementing the Feed component next!

Creating the Feed Component

Next, let’s create the Feed component. Start by creating a new folder named home inside the app/components directory. Within this folder, create a new file called Feed.tsx.

Here is the content for the Feed.tsx file:

import React, { useCallback, useState } from "react";
import { EntityProvider, useFeed } from "@replyke/expo";
import {
  RefreshControl,
  View,
  Text,
  FlatList,
  ActivityIndicator,
} from "react-native";
import { SinglePost } from "../shared/SinglePost";

function Feed() {
  const { entities, loadMore, resetEntities, loading } = useFeed();
  const [listHeight, setListHeight] = useState(0);
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await resetEntities?.();
    setRefreshing(false);
  }, [resetEntities]);

  const initialLoading = loading && (!entities || entities.length === 0);

  if (initialLoading)
    return (
      <View className="flex-1 items-center justify-center">
        <ActivityIndicator size="large" />
      </View>
    );

  return (
    <View
      className="flex-1"
      onLayout={(event) => {
        if (event.nativeEvent.layout.height > listHeight)
          setListHeight(event.nativeEvent.layout.height);
      }}
    >
      <FlatList
        data={entities!}
        renderItem={({ item: entity }) => (
          <EntityProvider entity={entity}>
            <SinglePost listHeight={listHeight} />
          </EntityProvider>
        )}
        keyExtractor={(item) => item.id}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
        onEndReached={loadMore}
        onEndReachedThreshold={2}
        ListFooterComponent={null}
        ListEmptyComponent={
          loading ? null : (
            <View
              className="flex-1 bg-white justify-center"
              style={{
                height: listHeight,
              }}
            >
              <Text className="text-center text-xl font-medium text-gray-400">
                No Results
              </Text>
              <Text className="text-center text-lg text-gray-400 mt-2">
                Try expanding your search
              </Text>
            </View>
          )
        }
        pagingEnabled
        decelerationRate="fast"
        showsVerticalScrollIndicator={false}
        snapToAlignment="start"
        scrollEventThrottle={16}
        bounces={false}
      />
    </View>
  );
}

export default Feed;

What’s Happening in the Feed Component

useFeed Hook: This custom hook from @replyke/expo fetches and manages feed data, including loading states, entities (posts), and pagination functionality.
State Management: We use useState to manage:
- listHeight: Keeps track of the height of the list to ensure proper rendering.
- refreshing: Tracks the pull-to-refresh state.
Pull-to-Refresh: The onRefresh function resets the feed data by calling resetEntities. This provides a smooth user experience for refreshing the feed.
FlatList Parameters:
- data: This is the array of posts (entities) to display in the feed.
- renderItem: For each item (post) in the data, this renders a SinglePost component wrapped in an EntityProvider, which will provide the post the necessary context.
- keyExtractor: Generates a unique key for each item based on its id property.
- refreshControl: Enables pull-to-refresh functionality with a RefreshControl component.
- onEndReached: Triggered when the user scrolls near the end of the list, calling loadMore to fetch additional posts.
- onEndReachedThreshold: Determines how close the user needs to scroll to the bottom for onEndReached to trigger (2 means the function triggers a bit earlier).
- ListEmptyComponent: Displays a message when there are no posts to show and no loading is happening.
- pagingEnabled: Ensures that scrolling snaps to items.
- decelerationRate and snapToAlignment: Help create a smooth, fast-scrolling experience.
- showsVerticalScrollIndicator: Hides the scroll indicator.
- scrollEventThrottle: Controls the frequency of scroll events for better performance.
- bounces: Disables the bounce effect when scrolling past the list’s edges.
Loading States:
- Displays an ActivityIndicator while the initial data is loading.

This setup ensures the feed dynamically handles pagination, refresh, and empty states, creating a seamless user experience. Next, we’ll implement the SinglePost component to complete the post display!

Implementing the SinglePost Component

Folder and File Structure

Let’s organize our SinglePost component for reuse across multiple screens (e.g., Home, User Profile, Single Post). Create the following structure inside app/components:

app/
  components/
    shared/
      SinglePost/
        SinglePost.tsx
        PostActions.tsx
        index.ts

We’re placing SinglePost in the shared folder because it will be reused in multiple screens. Creating a dedicated folder for SinglePost keeps related parts neatly organized, as the component will grow in complexity over time.

`SinglePost.tsx`

Create the SinglePost.tsx file with the following code:

import { Image, Text, View } from "react-native";
import React from "react";
import { useEntity } from "@replyke/expo";
import PostActions from "./PostActions";

const SinglePost = ({ listHeight }: { listHeight: number }) => {
  const { entity } = useEntity();

  if (!entity) return null; // This ensures type safety, as the EntityProvider guarantees entity existence.

  return (
    <View className="relative flex-1" style={{ height: listHeight }}>
      <Image
        source={{ uri: entity.media[0].publicPath }}
        className="flex-1"
        resizeMode="cover"
      />

      {/* Caption */}
      <View className="px-6 py-4 gap-2 absolute left-0 bottom-0 right-0 bg-black/30">
        <Text className="text-white">{entity.title}</Text>
      </View>

      {/* Actions */}
      <PostActions />
    </View>
  );
};

export default SinglePost;

Explanation:

Entity Context: The useEntity hook provides the current post data (entity). If no entity is available, the component renders nothing. This ensures type safety, as the EntityProvider directly passes a defined entity.
Image Display: The post’s primary media (image) is displayed full-screen.
Caption: The title of the post appears as an overlay at the bottom of the image.
PostActions: Adds buttons for interacting with the post, such as likes, comments, and bookmarks.

`PostActions.tsx`

Before Creating the PostActions.tsx file, make sure to install @replyke/ui-core-react-native by running:

npx expo install @replyke/ui-core-react-native

We will use the UserAvatar component from the package, and other component later in the tutorial.

Create the PostActions.tsx file with the following code:

import React from "react";
import { View, TouchableOpacity, Text, Pressable } from "react-native";
import { useEntity } from "@replyke/expo";
import { UserAvatar } from "@replyke/ui-core-react-native";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import AntDesign from "@expo/vector-icons/AntDesign";
import Ionicons from "@expo/vector-icons/Ionicons";

function PostActions() {
  const { entity } = useEntity();

  if (!entity) return null;

  return (
    <View
      className="absolute right-4 bottom-20 z-50 items-center gap-6 bg-black/30 p-3 pb-4 rounded-2xl"
      style={{ columnGap: 12 }}
    >
      {/* User avatar and follow button */}
      <Pressable>
        <UserAvatar user={entity.user} size={46} borderRadius={8} />
      </Pressable>

      {/* LIKE BUTTON */}
      <TouchableOpacity className="items-center gap-1.5">
        <AntDesign name="heart" size={36} color="white" />

        <Text className="text-white overflow-visible">
          {entity?.upvotes.length}
        </Text>
      </TouchableOpacity>

      {/* OPEN COMMENT SECTION */}
      <TouchableOpacity className="items-center gap-1.5">
        <Ionicons name="chatbubble" size={36} color="#ffffff" />

        {(entity.repliesCount || 0) > 0 && (
          <Text className="text-[#9ca3af]">{entity.repliesCount}</Text>
        )}
      </TouchableOpacity>

      {/* BOOKMARK BUTTON */}
      <TouchableOpacity>
        <FontAwesome name="bookmark" size={32} color="#ffffff99" />
      </TouchableOpacity>
    </View>
  );
}

export default PostActions;

Explanation:

User Avatar: Displays the post creator’s avatar. In the future, tapping this can navigate to the user’s profile.
Like Button: Displays the number of likes/upvotes the post has received. This button will later support liking/unliking posts.
Comment Button: Shows the number of comments (if any). This button will later open the comment section when clicked.
Bookmark Button: Allows saving the post. This button will later open the collections sheet.

`index.ts`

Create an index.ts file with the following:

export { default as SinglePost } from "./SinglePost";

This allows other components to import SinglePost easily from the folder.

Wrapping Up

In this chapter, we’ve set the stage for the feed by creating the Feed and SinglePost components. These components handle displaying posts in a visually appealing and interactive layout, including features like likes, comments, and bookmarks. While we’ve built the foundation, we’re not done yet! In the next chapter, we’ll wire up these features to make them fully functional, allowing users to engage with the content seamlessly.

Stay Updated

How to Build a Social Network in 1 Day: Part 5 - Creating Posts

Tsabary — Tue, 21 Jan 2025 14:16:07 +0000

In this part of the tutorial, we’ll implement the Create Post screen—an essential feature of any social networking app. Users will be able to upload an image, add a caption, and create their very first post. This screen is comprised of four views, each serving a distinct purpose in the post creation process:

1. Asking for Permission

Before using the user’s camera, we need to ask for permission. When navigating to the Create Post screen for the first time, users will see a prompt asking them to grant camera access. This view will only appear once, during the app’s initial setup. After permission is granted, users won’t see this screen again.

2. Capture Photo View

The second view is where users interact with their camera. This is the default view every time they access the Create Post screen after the first usage. Here, users can:

Capture a photo.
Choose an image from their gallery.
Flip the camera between front and back.

Once the user selects or captures a photo, they are automatically directed to the next screen: the Preview Screen.

3. Preview Screen

The Preview Screen allows users to view their selected photo in full. From here, they can:

Discard the photo and return to the Capture Photo View.
Proceed to the next stage by clicking Next, which takes them to the Finalize Post View.

4. Finalize Post View

In the Finalize Post View, users can:

View a thumbnail of their selected photo.
Enter a caption for their post using a text input field.
Submit their post by clicking the Submit button.

Upon submission, the app will first upload the file to Replyke. After a successful upload, we’ll create a new entity in Replyke using the post details and file data.

Key Considerations for Readers

1. Leveraging Replyke to Add Unique Features

While this tutorial focuses on building the foundational features of a social network, Replyke offers a wide range of tools to customize your app and make it unique. For example:

Additional Fields: When creating entities, we’ll use the basic "title" and "media" fields. However, Replyke also supports fields like:
- Keywords: Add tags for better feed filtration.
- Content: Include both a title and detailed content for posts.
- Location: Enable sorting posts by geolocation.
- Metadata: Store extra information using a flexible JSON object.

These additional features can help developers create a unique value proposition for their app and enable advanced feed filtering options.

2. Keeping UI Design Minimal

Our primary focus in this tutorial is functionality, not design. We will place elements in an intuitive way, but they won’t have cutting-edge styling. It’s up to you as a developer to elevate your app’s design and make it stand out.

To assist with design inspiration, consider joining the Discord server where boilerplates for social network apps—including more advanced styles—are shared.

With this solid overview in place, let’s move on to the technical implementation of the Create Post screen. By the end of this part, you’ll have a fully functional workflow for users to create and share posts in your app. Let’s get started!

Accumulated reading time so far: 18 minutes.

Part 5 completed repo on GitHub for reference

Installing Required Packages

To get started, install the following packages in your project:

npx expo install expo-camera expo-image-picker expo-image-manipulator

These libraries will handle camera access, image selection, and basic image manipulation.

Setting Up the Folder Structure

Create a components folder in the root of your project. Inside it, create another folder named create-post to store the components for this feature. Add the following files to the create-post folder:

components
  - create-post
    - FinalizePost.tsx
    - PhotoCapture.tsx
    - PhotoPreview.tsx
    - RequestPermission.tsx

We will populate these components in the following sections of this article.

Adding the Create Post Screen

Add the following code to your Create Post screen file:

import { useState } from "react";
import { View } from "react-native";
import { useCameraPermissions, CameraCapturedPicture } from "expo-camera";
import * as ImagePicker from "expo-image-picker";
import { useUser } from "@replyke/expo";
import { Redirect } from "expo-router";

import PhotoCapture from "../../components/create-post/PhotoCapture";
import PhotoPreview from "../../components/create-post/PhotoPreview";
import RequestPermission from "../../components/create-post/RequestPermission";
import FinalizePost from "../../components/create-post/FinalizePost";

export default function CreateScreen() {
  const { user } = useUser();

  const [permission, requestPermission] = useCameraPermissions();

  const [cameraPhoto, setCameraPhoto] = useState<CameraCapturedPicture | null>(
    null
  );
  const [galleryPhoto, setGalleryPhoto] =
    useState<ImagePicker.ImagePickerAsset | null>(null);

  const [step, setStep] = useState<"capture" | "preview" | "finalize">(
    "capture"
  );

  const resetCreateScreen = () => {
    setCameraPhoto(null);
    setGalleryPhoto(null);
    setStep("capture");
  };

  if (!user) return <Redirect href="/sign-in" />;

  if (!permission) {
    // Camera permissions are still loading.
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet.
    return <RequestPermission requestPermission={requestPermission} />;
  }

  if (step === "finalize" && (cameraPhoto || galleryPhoto)) {
    return (
      <FinalizePost
        setStep={setStep}
        cameraPhoto={cameraPhoto}
        galleryPhoto={galleryPhoto}
        resetCreateScreen={resetCreateScreen}
      />
    );
  }

  if (step === "preview" && (cameraPhoto || galleryPhoto)) {
    return (
      <PhotoPreview
        cameraPhoto={cameraPhoto}
        galleryPhoto={galleryPhoto}
        setStep={setStep}
        resetCreateScreen={resetCreateScreen}
      />
    );
  }

  return (
    <PhotoCapture
      setCameraPhoto={setCameraPhoto}
      setGalleryPhoto={setGalleryPhoto}
      setStep={setStep}
    />
  );
}

Explanation of the Code

State Variables:

permission: Tracks the camera permissions.
cameraPhoto and galleryPhoto: Store the selected or captured photo.
step: Determines the current view (capture, preview, or finalize).

resetCreateScreen Function: Resets the state to start the process from the Capture Photo view.
Conditional Rendering:
- Displays RequestPermission if camera permissions are not granted.
- Shows PhotoCapture, PhotoPreview, or FinalizePost components based on the step state and photo data.

In the next sections, we’ll dive into the implementation of each component individually.

In this section, we will implement the individual components, starting with the RequestPermission component. This is a simple yet critical part of the Create Post feature. It handles asking the user for camera permissions when they navigate to the Create Post screen for the first time.

Code for RequestPermission Component

Below is the code for the RequestPermission component:

import { View, Text } from "react-native";
import React from "react";
import { Button } from "react-native";
import * as ImagePicker from "expo-image-picker";

// The RequestPermission component is responsible for requesting camera permissions
// when the user navigates to the Create Post screen for the first time.
const RequestPermission = ({
  requestPermission, // Function passed as a prop to trigger the permission request.
}: {
  requestPermission: () => Promise<ImagePicker.PermissionResponse>; // Defines the type of the prop to ensure it's a function that returns a Promise.
}) => {
  return (
    <View className="flex-1">
      {/* Full-screen container with content vertically centered */}
      <View className="flex-1 justify-center">
        {/* Text to explain why camera permission is needed */}
        <Text className="pb-2.5 text-center">
          We need your permission to show the camera
        </Text>
        {/* Button to trigger the requestPermission function */}
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    </View>
  );
};

export default RequestPermission;

Explanation

Purpose:
- The RequestPermission component handles the UI and logic for requesting camera permissions.
- It is displayed only if the app does not yet have the required permissions.
Props:
- The requestPermission prop is a function that prompts the user to grant camera access. This function is passed down from the parent CreateScreen component.
Structure:
- The component renders a View container to take up the full screen.
- Inside the container, a Text component displays a message explaining why the app requires camera permissions.
- A Button component is provided for the user to grant permission, triggering the requestPermission function.

This component is simple and straightforward, focusing on user interaction for permission handling. Once the user grants permission, the app will navigate to the next step in the workflow.

Code for PhotoCapture Component

Now, let’s implement the PhotoCapture component. This component allows users to capture a photo, choose one from the gallery, or switch between the front and back cameras.

import React, { useRef, useState } from "react";
import { TouchableOpacity, View } from "react-native";
import { CameraView, CameraType, CameraCapturedPicture } from "expo-camera";
import * as ImagePicker from "expo-image-picker";
import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
import FontAwesome from "@expo/vector-icons/FontAwesome";

function PhotoCapture({
  setCameraPhoto,
  setGalleryPhoto,
  setStep,
}: {
  setCameraPhoto: React.Dispatch<
    React.SetStateAction<CameraCapturedPicture | null>
  >;
  setGalleryPhoto: React.Dispatch<
    React.SetStateAction<ImagePicker.ImagePickerAsset | null>
  >;
  setStep: React.Dispatch<
    React.SetStateAction<"capture" | "preview" | "finalize">
  >;
}) {
  const [facing, setFacing] = useState<CameraType>("back");
  const cameraRef = useRef<CameraView>(null);

  const pickFromGallery = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      quality: 1,
      aspect: [9, 16],
    });

    if (!result.canceled) {
      setGalleryPhoto(result.assets[0]);
      setCameraPhoto(null); // Clear the camera photo if you switch sources
      setStep("preview");
    }
  };

  const capturePhoto = async () => {
    if (cameraRef.current) {
      const options = { quality: 1, base64: true };
      const capturedPhoto = await cameraRef.current.takePictureAsync(options);
      setCameraPhoto(capturedPhoto ?? null);
      setGalleryPhoto(null); // Clear the gallery photo if you switch sources
      setStep("preview");
    }
  };

  function toggleCameraFacing() {
    setFacing((current) => (current === "back" ? "front" : "back"));
  }

  return (
    <View className="flex-1 justify-center">
      <CameraView style={{ flex: 1 }} facing={facing} ref={cameraRef}>
        <View className="absolute bottom-12 left-0 right-0 flex-row items-center w-full bg-transparent justify-around">
          <TouchableOpacity
            className="p-4 bg-black/10 rounded-full"
            onPress={pickFromGallery}
          >
            <FontAwesome name="picture-o" size={24} color="white" />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={capturePhoto}
            className="border-4 border-white rounded-full"
          >
            <View className="bg-white rounded-full size-16 border-4" />
          </TouchableOpacity>
          <TouchableOpacity
            className="p-4 bg-black/10 rounded-full"
            onPress={toggleCameraFacing}
          >
            <FontAwesome6 name="rotate" size={24} color="white" />
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

export default PhotoCapture;

Explanation

Purpose:
- The PhotoCapture component provides the main interface for users to capture a photo or select one from their gallery.
- Users can also toggle between the front and back cameras.
Props:
- setCameraPhoto and setGalleryPhoto: Functions to update the state for the captured or selected photo.
- setStep: Updates the current step in the Create Post workflow.
Functions:
- pickFromGallery: Opens the device's image library and allows the user to select a photo.
- capturePhoto: Uses the camera to capture a photo and saves it to the state.
- toggleCameraFacing: Switches the camera between front and back.
Structure:
- A CameraView component displays the live camera feed.
- Three buttons allow the user to:
  - Open the gallery.
  - Capture a photo.
  - Toggle the camera facing.

This component plays a vital role in capturing or selecting the image that will be part of the post. In the next section, we’ll explore the implementation of the PhotoPreview component.

Code for PhotoPreview Component

Now, let’s implement the PhotoPreview component. This component allows users to review the photo they’ve captured or selected and decide whether to proceed or discard it.

import { Image, Pressable, Text, View } from "react-native";
import { CameraCapturedPicture } from "expo-camera";
import * as ImagePicker from "expo-image-picker";
import AntDesign from "@expo/vector-icons/AntDesign";

function PhotoPreview({
  cameraPhoto,
  galleryPhoto,
  setStep,
  resetCreateScreen,
}: {
  cameraPhoto: CameraCapturedPicture | null;
  galleryPhoto: ImagePicker.ImagePickerAsset | null;
  setStep: React.Dispatch<
    React.SetStateAction<"capture" | "preview" | "finalize">
  >;
  resetCreateScreen: () => void;
}) {
  return (
    <View className="flex-1 bg-black">
      <Image
        source={{ uri: (cameraPhoto ?? galleryPhoto)?.uri }}
        className="flex-1"
        resizeMode="cover"
      />
      <View className="flex-1 absolute top-0 left-0 right-0 z-50 flex-row justify-between p-3">
        <Pressable
          onPress={() => {
            resetCreateScreen();
          }}
          className="px-3 py-2 bg-blue-500 flex-row items-center gap-2 rounded-xl"
        >
          <AntDesign name="arrowleft" size={16} color="white" />
          <Text className="text-lg tracking-wide text-white">Preview</Text>
        </Pressable>
        <Pressable
          onPress={() => setStep("finalize")}
          className="px-3 bg-blue-500 flex-row items-center gap-2 rounded-xl"
        >
          <Text className="text-lg tracking-wide text-white">Next</Text>
        </Pressable>
      </View>
    </View>
  );
}

export default PhotoPreview;

Explanation

Purpose:
- The PhotoPreview component lets users review the selected or captured image before finalizing their post.
- It provides options to go back and retake/select another photo or proceed to add a caption.
Props:
- cameraPhoto and galleryPhoto: Represent the image captured by the camera or selected from the gallery.
- setStep: Controls navigation to the next step in the post creation process.
- resetCreateScreen: Resets the entire flow, returning the user to the initial camera view.
Structure:
- Displays the photo in full-screen mode using the Image component.
- Two Pressable buttons are provided:
  - One for returning to the photo capture step.
  - One for proceeding to the finalization step.

This component is key for offering a seamless and user-friendly post creation experience. In the next section, we will implement the FinalizePost component.

Code for FinalizePost Component

In this final step, users can review their selected image, add a caption, and submit their post. We’ll also include a utility function to resize images if necessary.

Creating the `resizeIfNeeded` Utility

First, create a new file named resizeIfNeeded.ts in the utils folder and add the following code:

import { Image } from "react-native";
import { manipulateAsync, SaveFormat } from "expo-image-manipulator";

export async function resizeIfNeeded(uri: string): Promise<{ uri: string; extension: string }> {
  return new Promise((resolve, reject) => {
    Image.getSize(
      uri,
      async (originalWidth, originalHeight) => {
        try {
          const maxDim = 800;

          // Extract the file extension from the URI (if available)
          const originalExtensionMatch = uri.match(/\.(\w+)$/);
          const originalExtension = originalExtensionMatch ? originalExtensionMatch[1].toLowerCase() : "jpg";

          // If the image is small enough, keep the original extension
          if (originalWidth <= maxDim && originalHeight <= maxDim) {
            return resolve({ uri, extension: originalExtension });
          }

          // Resize logic
          let newWidth: number;
          let newHeight: number;

          if (originalWidth > originalHeight) {
            // Landscape image -> limit width to 800, scale height
            const scaleFactor = maxDim / originalWidth;
            newWidth = Math.floor(originalWidth * scaleFactor);
            newHeight = Math.floor(originalHeight * scaleFactor);
          } else {
            // Portrait or square -> limit height to 800, scale width
            const scaleFactor = maxDim / originalHeight;
            newWidth = Math.floor(originalWidth * scaleFactor);
            newHeight = Math.floor(originalHeight * scaleFactor);
          }

          // Manipulate the image
          const { uri: resizedUri } = await manipulateAsync(
            uri,
            [{ resize: { width: newWidth, height: newHeight } }],
            { compress: 0.7, format: SaveFormat.JPEG }
          );

          resolve({ uri: resizedUri, extension: "jpg" });
        } catch (err) {
          reject(err);
        }
      },
      (error) => {
        reject(error);
      }
    );
  });
}

Explanation

Purpose:
- This utility ensures images are resized to a maximum dimension of 800px for better performance and upload efficiency.
Logic:
- If the image dimensions exceed 800px, the function calculates the new dimensions while preserving the aspect ratio.
- The manipulateAsync function resizes and compresses the image before returning the new URI.
Usage:
- The resized image is returned as a URI, ready for uploading.

Code for `FinalizePost` Component

import {
  ActivityIndicator,
  Image,
  Pressable,
  Text,
  TextInput,
  View,
  TouchableOpacity,
} from "react-native";
import React, { useState } from "react";
import { useCreateEntity, useUploadFile, useUser } from "@replyke/expo";
import { useRouter } from "expo-router";
import { CameraCapturedPicture } from "expo-camera";
import * as ImagePicker from "expo-image-picker";
import AntDesign from "@expo/vector-icons/AntDesign";
import { resizeIfNeeded } from "../../utils/resizeIfNeeded";

const FinalizePost = ({
  cameraPhoto,
  galleryPhoto,
  setStep,
  resetCreateScreen,
}: {
  cameraPhoto: CameraCapturedPicture | null;
  galleryPhoto: ImagePicker.ImagePickerAsset | null;
  setStep: React.Dispatch<
    React.SetStateAction<"capture" | "preview" | "finalize">
  >;
  resetCreateScreen: () => void;
}) => {
  const router = useRouter();
  const { user } = useUser();
  const uploadFile = useUploadFile();
  const createEntity = useCreateEntity();
  const [uploading, setUploading] = useState(false);
  const [caption, setCaption] = useState("");

  const handleUpload = async (imageUri: string) => {
    if (!imageUri || !user) return;

    setUploading(true);

    try {
     // Resize to ensure neither side exceeds 800
      const { uri, extension } = await resizeIfNeeded(imageUri);

      // Prepare the file for upload (in React Native style)
      const rnFile = {
        uri: uri,
        type: `image/${extension}`,
        name: `${Date.now()}.${extension}`,
      };

      // Upload the resized file to your storage:
      const pathParts = ["posts", user.id];
      const uploadResponse = await uploadFile(rnFile, pathParts);

      if (uploadResponse) {
        await createEntity({
          title: caption,
          media: [{ ...uploadResponse, extension }],
        });
      }

      // Navigate away and reset
      router.navigate("/");
      resetCreateScreen();
    } catch (error) {
      console.error("Error uploading file:", error);
    } finally {
      setUploading(false);
    }
  };

  return (
    <View className="flex-1 bg-white">
      <Pressable
        onPress={() => setStep("preview")}
        className="m-3 px-3 py-2 flex-row items-center gap-2 rounded-xl"
      >
        <AntDesign name="arrowleft" size={16} color="black" />
        <Text className="text-lg tracking-wide">New Post</Text>
      </Pressable>
      <View className="flex-1">
        <View className="h-64">
          <Image
            source={{ uri: (cameraPhoto ?? galleryPhoto)?.uri }}
            className="flex-1"
            resizeMode="cover"
          />
        </View>
        <TextInput
          value={caption}
          onChangeText={(value) => {
            if (value.length > 120) return;
            setCaption(value);
          }}
          className="m-3 text-left border-b border-gray-300"
          placeholder="Add caption.."
          placeholderTextColor="#9ca3af"
          autoCapitalize="none"
        />
      </View>

      <TouchableOpacity
        onPress={() => handleUpload((cameraPhoto ?? galleryPhoto)!.uri)}
        disabled={uploading}
        className="px-3 py-4 flex-row items-center justify-center gap-2 rounded-xl bg-black m-3 "
      >
        {uploading && <ActivityIndicator />}
        <Text className="text-lg tracking-wide text-white text-center">
          Publish
        </Text>
      </TouchableOpacity>
    </View>
  );
};

export default FinalizePost;

Explanation

Purpose:
- Allows users to add a caption and submit their post.
- Ensures the image is resized for optimal performance.
Key Functions:
- resizeIfNeeded: Resizes the image if its dimensions exceed 800px.
- handleUpload: Uploads the image and creates the post entity.
User Flow:
- Displays the selected image.
- Captures user input for the caption.
- Handles uploading and navigation after submission.

Wrapping Up

In this part of our tutorial, we built the Create Post feature of our social networking app. We implemented components to request camera permissions, capture or select an image, preview the photo, and finalize the post with a caption. Along the way, we also introduced a utility function to resize images for better performance.

With the Create Post functionality completed, we are now ready to move to the next exciting part of this series: building the feed! In the upcoming chapter, we will create a dynamic feed to display posts, allowing users to browse and interact with content shared on the app.

If you're looking to take your app even further, explore the documentation to learn how you can customize the entity with additional data and functionality beyond what we've covered here. Stay tuned!

Stay Updated

How to Build a Social Network in 1 Day: Part 4 - Tabs Navigation

Tsabary — Sun, 19 Jan 2025 20:36:00 +0000

In the previous chapter, we established a solid foundation by setting up authentication and integrating Replyke into our project. Now, it’s time to build on that foundation by implementing the tab navigation structure that will serve as the backbone for your app’s user experience.

Tab navigation allows users to easily switch between key sections of your app, such as the feed, profile, and notifications. In this chapter, we’ll set up the pages for each tab and link them together with a navigation bar. By the end, your app will have a clean and intuitive navigation structure, making it easy for users to explore and interact with its features.

Accumulated reading time so far: 14 minutes.

Part 4 completed repo on GitHub for reference

Expanding the App Directory

To begin, let’s create all the new screens needed for the app. After adding these screens, your app directory structure should look like this:

- app
  - (tabs)
    - _layout.tsx
    - create-post.tsx
    - index.tsx
    - lists.tsx
    - notifications.tsx
    - profile
      - _layout.tsx
      - edit-bio.tsx
      - edit-name.tsx
      - edit-profile.tsx
      - edit-username.tsx
      - index.tsx
      - settings.tsx
  - account
    - [accountId].tsx
  - post
    - [postId].tsx
  - sign-in.tsx
  - sign-up.tsx
  - _layout.tsx

Creating Placeholder Screens

For now, all the new screens should contain placeholder content. Use the following template for each new file:

import { View, Text } from "react-native";
import React from "react";

const ScreenName = () => {
  return (
    <View>
      <Text>ScreenName</Text>
    </View>
  );
};

export default ScreenName;

Replace ScreenName with the name of each screen you’re creating, such as ListsScreen for lists.tsx. This ensures each screen is set up and ready to be populated later in the guide.

Understanding Dynamic Routes

You’ll notice files named [accountId].tsx and [postId].tsx. These are dynamic routes. In these cases, the brackets [] denote that the file name is a placeholder for a dynamic value. For example:

account/[accountId].tsx: This screen is used when navigating to another user’s profile. The accountId represents the specific user ID.
post/[postId].tsx: This screen is used when navigating to a specific post. The postId represents the unique ID of the post.

Ensure that you write these file names exactly as shown, including the brackets, as they are case-sensitive and integral to the routing system.

Organizing the Profile Folder

The profile folder serves as the base of the user’s profile stack. From the profile screen, users can navigate to various settings and editing options. Structuring it this way keeps all profile-related screens neatly organized and encapsulated within the profile folder.

Adding the Tab Navigation Layout

Update the app/(tabs)/_layout.tsx file to include the new tab screens with unique icons. Here is the complete code:

import { Tabs } from "expo-router";
import React from "react";
import Entypo from "@expo/vector-icons/Entypo";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import AntDesign from '@expo/vector-icons/AntDesign';
import FontAwesome5 from "@expo/vector-icons/FontAwesome5";

export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => (
            <Entypo name="home" size={28} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="lists"
        options={{
          title: "Lists",
          tabBarIcon: ({ color }) => (
            <FontAwesome name="bookmark" size={28} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="create-post"
        options={{
          title: "Create",
          tabBarIcon: ({ color }) => (
            <AntDesign name="pluscircleo" size={28} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="notifications"
        options={{
          title: "Notifications",
          tabBarIcon: ({ color }) => (
            <Entypo name="bell" size={28} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: "Profile",
          tabBarIcon: ({ color }) => (
            <FontAwesome5 name="user-alt" size={28} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

Setting Up the Profile Stack Layout

The app/(tabs)/profile/_layout.tsx file defines the stack navigation for profile-related screens. Use the following code:

import { Stack } from "expo-router";

export default function ProfileLayout() {
  return (
    <Stack
      screenOptions={{
        gestureEnabled: true, // Enable swipe gestures
        animation: "default",
        presentation: "transparentModal", // or 'modal', 'card', etc.
        headerShown: false,
        contentStyle: {
          backgroundColor: "#fff",
        },
      }}
    >
      <Stack.Screen name="index" />
      <Stack.Screen name="settings" />
      <Stack.Screen name="edit-profile" />
      <Stack.Screen name="edit-bio" />
      <Stack.Screen name="edit-name" />
      <Stack.Screen name="edit-username" />
    </Stack>
  );
}

With these layouts in place, your app is now ready for tab navigation and profile management. Soon, we’ll begin populating these screens with interactive and dynamic content!

Setting Up Utility Functions

To prepare for the next chapter and beyond, we will create two utility functions. These will streamline our work as we build additional features.

Creating the "utils" Folder

First, create a new folder named utils in the root of your app. Inside this folder, add two files: cn.ts and formatNumber.ts.

`cn.ts`

In the cn.ts file, paste the following code:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

This function merges Tailwind class names efficiently and correctly, ensuring that conflicting classes are handled automatically. To use it, install the necessary dependencies:

npm install clsx tailwind-merge

`formatNumber.ts`

In the formatNumber.ts file, paste the following code:

export function formatNumber(num: number): string {
  if (num < 1000) {
    return num.toString();
  } else if (num < 1_000_000) {
    return `${(num / 1000).toFixed(1).replace(/\.0$/, "")}k`;
  } else if (num < 1_000_000_000) {
    return `${(num / 1_000_000).toFixed(1).replace(/\.0$/, "")}m`;
  } else {
    return `${(num / 1_000_000_000).toFixed(1).replace(/\.0$/, "")}b`;
  }
}

This function formats numbers in a user-friendly way, such as converting 1500 to 1.5k or 1,200,000 to 1.2m. It’s perfect for displaying follower counts or other large numbers.

Wrapping Up

With the new tab navigation, profile stack layout, and utility functions in place, we now have the complete skeleton for our app. This foundation sets us up perfectly for the next chapter, where we will dive into implementing the Create Post screen. Together, we’ll add functionality to upload an image, add a caption, and create our very first post. Stay tuned!

Stay Updated

How to Build a Social Network in 1 Day: Part 3 - Authentication

Tsabary — Sat, 18 Jan 2025 06:50:40 +0000

In this chapter, we’ll delve into setting up authentication for your social network app. Authentication is a fundamental component of any app, ensuring that user actions and data are tied to verified identities. Before diving into the technical details, it’s important to revisit Replyke and its role in authentication.

Accumulated reading time so far: 6 minutes.

Part 3 completed repo on GitHub for reference

Replyke’s Role in Authentication

Replyke is the backbone of our project, enabling seamless integration of various features like commenting, voting, and notification systems. A critical aspect of these features is associating actions and data with specific users, which is achieved through authentication. While we’ve already introduced Replyke in the tutorial’s introduction, this chapter marks the point where we begin setting up our Replyke project, as authentication is required to proceed further.

Why Use Replyke for Authentication?

For the purposes of this tutorial, Replyke’s built-in authentication system is the most practical starting point. It allows us to move forward with minimal complexity and keeps the focus on building the app rather than getting bogged down in authentication details. Replyke supports email and password authentication, which is sufficient for getting the project off the ground.

If you prefer a more robust or specialized authentication system, or if you already have an existing one, you can easily integrate it later. Replyke is designed with flexibility in mind, making it straightforward to replace its built-in authentication with your own setup once the app is more developed. For now, I recommend sticking with Replyke’s authentication to simplify the process and keep things moving efficiently.

Why Set Up Authentication Now?

Authentication is crucial to set up at the start of the project because many features we’ll build rely on having a user system in place. Without it, our code would have significant gaps and missing parts, making development unnecessarily complex. Establishing authentication now ensures a solid foundation for building interactive features and avoids the need for major refactoring later.

Let’s get started with the technical setup!

Setting Up Replyke in Your Project

Now, let’s set up Replyke in our project. Follow these steps to integrate Replyke and prepare for authentication:

Create a Project on Replyke Dashboard: Head over to dashboard.replyke.com, create an account, and open a new project. Once the project is created, copy the provided project ID.
Install Replyke for Expo: In your terminal run npx expo install @replyke/expo to install the latest version of Replyke for Expo.
Wrap App's Content with ReplykeProvider: In your app/_layout file, wrap your app’s content with the ReplykeProvider from Replyke, passing in the project ID you just copied. This initializes Replyke within your app.

With these steps completed, you’ve successfully set up Replyke in your project.

Here’s how the return statement of your app/_layout file should look after making these changes:

<ReplykeProvider projectId={process.env.EXPO_PUBLIC_REPLYKE_PROJECT_ID!}>
  <SafeAreaProvider>
    <SafeAreaView className="flex-1">
      <Stack
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
    </SafeAreaView>
    <StatusBar style="dark" />
  </SafeAreaProvider>
</ReplykeProvider>

With this foundational setup complete, you’re now ready to proceed with implementing authentication using Replyke. Let’s continue!

Setting Up Authentication Screens

Now that we’ve integrated Replyke into our project, it’s time to set up the authentication screens. These screens will allow users to sign in and sign up for your social network app. Follow these steps to create the necessary screens and understand their logic.

Step 1: Create Sign-In and Sign-Up Screens

In your app folder, create two new files:

sign-in.tsx
sign-up.tsx

Add the following code to each file respectively.

sign-in.tsx:

import { Redirect, useRouter } from "expo-router";
import React, { useState } from "react";
import { View, Text, TextInput, TouchableOpacity } from "react-native";
import validator from "validator";
import { useAuth, useUser } from "@replyke/expo";

const SignInScreen = () => {
  const router = useRouter();
  const { signInWithEmailAndPassword } = useAuth();
  const { user } = useUser();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState({ email: "", password: "" });

  const handleSignIn = async () => {
    const newErrors = { email: "", password: "" };

    if (!validator.isEmail(email)) {
      newErrors.email = "Please enter a valid email.";
    }

    if (validator.isEmpty(password)) {
      newErrors.password = "Password cannot be empty.";
    }

    setErrors(newErrors);

    if (!newErrors.email && !newErrors.password) {
      await signInWithEmailAndPassword?.({
        email,
        password,
      });
    }
  };

  if (user) return <Redirect href="/" />;

  return (
    <View className="flex-1 bg-white justify-center p-6">
      <Text className="text-2xl font-bold text-center mb-6">Sign In</Text>

      <TextInput
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        value={email}
        onChangeText={setEmail}
        className={`border rounded-lg px-4 py-3 mb-2 text-gray-700 ${
          errors.email ? "border-red-500" : "border-gray-300"
        }`}
      />
      {errors.email ? (
        <Text className="text-red-500 text-sm mb-4">{errors.email}</Text>
      ) : null}

      <TextInput
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
        className={`border rounded-lg px-4 py-3 mb-2 text-gray-700 ${
          errors.password ? "border-red-500" : "border-gray-300"
        }`}
      />
      {errors.password ? (
        <Text className="text-red-500 text-sm mb-6">{errors.password}</Text>
      ) : null}

      <TouchableOpacity
        onPress={handleSignIn}
        className="bg-blue-500 py-3 rounded-lg mb-4"
      >
        <Text className="text-white text-center font-medium">Log In</Text>
      </TouchableOpacity>

      <Text className="text-center text-gray-500 mb-4">
        Don’t have an account?{" "}
        <Text
          onPress={() => router.replace("/sign-up")}
          className="text-blue-500 font-medium"
        >
          Sign up instead
        </Text>
      </Text>

      <Text className="text-xs text-center text-gray-400 mt-auto">
        By continuing, you agree to the{" "}
        <Text className="text-blue-500 underline">terms and conditions</Text>{" "}
        and our <Text className="text-blue-500 underline">privacy policy</Text>.
      </Text>
    </View>
  );
};

export default SignInScreen;

sign-up.tsx:

import { Redirect, useRouter } from "expo-router";
import React, { useState } from "react";
import { View, Text, TextInput, TouchableOpacity } from "react-native";
import validator from "validator";
import { useAuth, useUser } from "@replyke/expo";

const SignUpScreen = () => {
  const router = useRouter();
  const { signUpWithEmailAndPassword } = useAuth();
  const { user } = useUser();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [errors, setErrors] = useState({
    email: "",
    password: "",
    confirmPassword: "",
  });

  const handleSignUp = async () => {
    const newErrors = { email: "", password: "", confirmPassword: "" };

    if (!validator.isEmail(email)) {
      newErrors.email = "Please enter a valid email.";
    }

    if (validator.isEmpty(password)) {
      newErrors.password = "Password cannot be empty.";
    } else if (password.length < 6) {
      newErrors.password = "Password must be at least 6 characters long.";
    }

    if (password !== confirmPassword) {
      newErrors.confirmPassword = "Passwords do not match.";
    }

    setErrors(newErrors);

    if (!newErrors.email && !newErrors.password && !newErrors.confirmPassword) {
      await signUpWithEmailAndPassword?.({ email, password });
    }
  };

  if (user) return <Redirect href="/" />;

  return (
    <View className="flex-1 bg-white justify-center p-6">
      <Text className="text-2xl font-bold text-center mb-6">Sign Up</Text>

      <TextInput
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        value={email}
        onChangeText={setEmail}
        className={`border rounded-lg px-4 py-3 mb-2 text-gray-700 ${
          errors.email ? "border-red-500" : "border-gray-300"
        }`}
      />
      {errors.email ? (
        <Text className="text-red-500 text-sm mb-4">{errors.email}</Text>
      ) : null}

      <TextInput
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
        className={`border rounded-lg px-4 py-3 mb-2 text-gray-700 ${
          errors.password ? "border-red-500" : "border-gray-300"
        }`}
      />
      {errors.password ? (
        <Text className="text-red-500 text-sm mb-4">{errors.password}</Text>
      ) : null}

      <TextInput
        placeholder="Confirm Password"
        secureTextEntry
        value={confirmPassword}
        onChangeText={setConfirmPassword}
        className={`border rounded-lg px-4 py-3 mb-2 text-gray-700 ${
          errors.confirmPassword ? "border-red-500" : "border-gray-300"
        }`}
      />
      {errors.confirmPassword ? (
        <Text className="text-red-500 text-sm mb-6">
          {errors.confirmPassword}
        </Text>
      ) : null}

      <TouchableOpacity
        onPress={handleSignUp}
        className="bg-blue-500 py-3 rounded-lg mb-4"
      >
        <Text className="text-white text-center font-medium">Sign Up</Text>
      </TouchableOpacity>

      <Text className="text-center text-gray-500 mb-4">
        Already have an account?{" "}
        <Text
          onPress={() => router.replace("/sign-in")}
          className="text-blue-500 font-medium"
        >
          Sign in instead
        </Text>
      </Text>

      <Text className="text-xs text-center text-gray-400 mt-auto">
        By continuing, you agree to the{" "}
        <Text className="text-blue-500 underline">terms and conditions</Text>{" "}
        and our <Text className="text-blue-500 underline">privacy policy</Text>.
      </Text>
    </View>
  );
};

export default SignUpScreen;

Step 2: Update the Home Screen

In your app/(tabs)/index.tsx file, replace the content with the following:

import { useRouter } from "expo-router";
import { Button, View } from "react-native";

export default function HomeScreen() {
  const router = useRouter();

  return (
    <View className="bg-red-500 flex-1 justify-center items-center">
      <Button title="Sign in" onPress={() => router.navigate("/sign-in")} />
    </View>
  );
}

Explanation of the Authentication Screens

Sign-In Screen (sign-in.tsx):
- Allows users to log in using their email and password.
- Validates the email format and ensures the password is not empty.
- Redirects authenticated users to the home screen.
Sign-Up Screen (sign-up.tsx):
- Enables new users to create an account by entering their email, password, and confirming their password.
- Performs validation checks for email format, password length, and password confirmation.
- Redirects authenticated users to the home screen.
Home Screen Update:
- Adds a button for navigation to the sign-in screen.
- Serves as the initial interaction point for unauthenticated users.

With these screens in place, your app now supports user authentication, creating a seamless entry point for users to access personalized features in your social network.

Wrapping Up

With these screens in place, your app now supports user authentication, creating a seamless entry point for users to access personalized features in your social network. You can try it out by signing up with a new account, and you’ll notice that upon successful sign-up, you are automatically authenticated and redirected back to the home screen.

However, the button on the home screen to navigate to the sign-in page will no longer work as expected because, whenever redirected to the sign-in page, you are immediately redirected back due to being logged in. To address this, and to allow you to explore the authentication flow further, we can add a simple sign-out button. This lets you log out and return to the sign-in page to test the functionality again.

Here's how you can modify the HomeScreen component to include a sign-out button:

import { useRouter } from "expo-router";
import { Button, View } from "react-native";
import { useAuth, useUser } from "@replyke/expo";

export default function HomeScreen() {
  const { signOut } = useAuth();
  const { user } = useUser();
  const router = useRouter();

  return (
    <View className="bg-red-500 flex-1 justify-center items-center gap-4">
      {user ? (
        <Button title="Sign out" onPress={signOut} />
      ) : (
        <Button title="Sign in" onPress={() => router.navigate("/sign-in")} />
      )}
    </View>
  );
}

With this small addition, you now have full control over the authentication flow, enabling you to sign in, sign out, and test the process repeatedly as you build and refine your app.

In the next chapter, we’ll shift gears and set up the essential structure of your app, including the screens, tab navigation, and utility functions that will support your app's features moving forward. Stay tuned!

Stay Updated

How to Build a Social Network in 1 Day: Part 2 - Laying the Foundation

Tsabary — Fri, 17 Jan 2025 10:08:31 +0000

In Part 1, we set the stage for our journey into building a social network app, discussing what lies ahead and the tools we’ll use. Now it’s time to roll up our sleeves and get to work. In this chapter, we’ll focus on setting up the foundation for our project. By the end of this section, you’ll have an Expo repository ready to go, equipped with TypeScript and NativeWind (Tailwind CSS for React Native), and a clean structure prepared for our app’s screens.

Let’s dive in!

Part 2 completed repo on GitHub for reference

This is what you should see at the end of this part (not exciting I know, but we'll be building this brick-by-brick!

Step 1: Creating the Expo App

To begin, navigate to the directory where you want to create your repository. Open your terminal and run the following command:

npx create-expo-app@latest

Follow the prompts to configure your project. Once the setup is complete, navigate into the newly created repository:

cd <your-repo-name>

Open the project in your IDE of choice, such as Visual Studio Code.

Step 2: Cleaning Up the Project Structure

We want to start with a clean slate, so let’s tidy up the default files and folders created by Expo.

Remove Unnecessary Files

Components, Constants, and Hooks: Delete the contents of the components, constants, and hooks folders.
Scripts Folder: Delete the scripts folder located at the root of your project (which contains reset-project.js).

Clean Up Screens in the `app` Folder

Inside the app folder, remove screens you won’t be using.
For the remaining screens, clear out their contents, leaving placeholders or empty functional components as needed.

Final Folder Structure

After this cleanup, your project structure should look like this:

.gitignore
app
  └─ (tabs)
      ├─ index.tsx
      └─ _layout.tsx
  └─ _layout.tsx
app.json
assets
  ├─ fonts
  │   └─ SpaceMono-Regular.ttf
  └─ images
      ├─ adaptive-icon.png
      ├─ icon.png
      └─ splash-icon.png
components
constants
hooks
package-lock.json
package.json
README.md
tsconfig.json

This streamlined setup ensures we stay focused and keep our project organized as we build out the app.

Cleaned Up Files

Here are the cleaned-up contents of the key files:

`app/_layout.tsx`

import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import { View } from "react-native";
import "react-native-reanimated";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <View>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
      <StatusBar style="auto" />
    </View>
  );
}

`app/(tabs)/_layout.tsx`

import { Tabs } from "expo-router";
import React from "react";

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
      }}
    >
      <Tabs.Screen name="index" />
    </Tabs>
  );
}

`app/(tabs)/index.tsx`

import { View } from "react-native";

export default function HomeScreen() {
  return <View></View>;
}

This streamlined setup ensures we stay focused and keep our project organized as we build out the app.

Step 3: Setting Up NativeWind

Configuration Steps

Follow the NativeWind Setup Guide: Use the NativeWind setup guide and select the Expo setup. Make sure to follow the latest version, as this tutorial is based on Expo SDK 52 at the time of writing.

Update the Tailwind Config File: Ensure your tailwind.config.js includes the components folder in addition to the app folder

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create and Import the globals.css File: At the root of your project (same level as package.json), create a file named globals.css. Copy the content from the NativeWind guide into this file. Then, import it at the top of app/_layout.tsx:
```
import "../globals.css";
```
Generate and Edit babel.config.js: If your project doesn’t include a babel.config.js file (as Expo hides it by default), generate one by running:
```
npx expo customize
```
Select the babel.config.js option using the space bar and hit Enter. Once generated, copy the content from the NativeWind guide into this file.
Generate and Edit metro.config.js: Similarly, if your project lacks a metro.config.js file, generate it using the same steps. Copy the content from the NativeWind guide into this file as well.
Edit app.json: The NativeWind guide includes instructions for modifying the web section in the app.json file. However, since we are building for mobile only, you can safely remove the entire web section. Your app.json file should now look like this, with the rest of its content untouched:
```
{
  "expo": {
    // other configurations here
  }
}
```
TypeScript Configuration (Required): Create a file named nativewind-env.d.ts at the root of your project with the following content:
```
/// <reference types="nativewind/types" />
```
This step is required for proper type support in our TypeScript-based app.

Verification

Before running your app, ensure you’ve updated the screen files to the following:

`app/_layout.tsx`

<View className="flex-1">
  <Stack>
    <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
  </Stack>
  <StatusBar style="auto" />
</View>

`app/(tabs)/index.tsx`

<View className="bg-red-500 flex-1">
  <Text>Hello World</Text>
</View>

Once these steps are complete, start your app with the following command:

npx expo start

Step 4: Setting Up SafeAreaProvider and SafeAreaView

SafeAreaProvider: This component provides the context for safe area boundaries and should wrap your entire application.
SafeAreaView: This component applies the safe area insets to its children. It can be used selectively for specific screens or layouts where you want to ensure the content is contained within the safe area.

For simplicity, in this tutorial, we’ll wrap the entire app with SafeAreaView. Here's how to integrate it:

Import SafeAreaProvider and SafeAreaView into app/_layout.tsx:

import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

Update the app/_layout.tsx file to wrap your app as follows:

<SafeAreaProvider>
      <SafeAreaView className="flex-1">
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        </Stack>
      </SafeAreaView>
      <StatusBar style="auto" />
</SafeAreaProvider>

Once you’ve made these updates, update your app or simply re-run it using:

npx expo start

You should now see the red screen with a Hello World message, properly contained within the safe area and a tab navigation bar at the bottom.

Wrapping Up

With this setup complete, your app is now ready to be built! We’ve laid the foundation by setting up the project structure, integrating NativeWind, and ensuring our app respects the device’s safe area boundaries.

In the next part of this tutorial, we’ll focus on authenticating users. Stay tuned, as this is where your social network starts coming to life!

DEV Community: Tsabary

Replyke vs Disqus: Complete Guide to Website Commenting Systems in 2025

Website Commenting System Overview

Disqus Alternative Analysis: Replyke's Modern Approach

The Open-Source Philosophy

Drop-in Integration with Native User Experience

Comment Widget Comparison: Setup and Integration

Replyke: Native Integration Without Complexity

Website Comments Solution: Features Face-Off

Threading and Engagement

The Advertisement-Free Advantage

Moderation Tools

Comment Section Tools: Pricing Breakdown

Performance Comparison

Mobile Responsiveness

Beyond Comments: The Full Social Platform - Replyke's Comprehensive Social Features

Replyke's Developer SDK Access:

The Verdict - Which Website Discussion Platform Should You Choose?

Technical Implementation Considerations

Native vs. External Experience

From AGPL 3.0 to Apache 2.0 - Why I've changed the license on 90% of my project

The DM That Sparked a Rethink

What Is Replyke?

Why I Picked AGPL Everywhere (at First)

The Problem With Blanket Copyleft on Front‑Ends

Mapping Goals to License Features

The Candidates I Considered

The Final Split

🔒 Server (AGPL-3.0-only)

🔓 Client (Apache-2.0)

™ Trademark Notice (excerpt)

Why This Matters Beyond Replyke

Try Replyke - Now With Less Friction

Final Thoughts

I've created a framework for building social products and now I've made it open-source

From Side Project to Framework

The Rebuild

More Than Just Comments

What’s in Replyke v4 (and v5)?

Building Replyke: A Layered, API-Centric Approach

1. The API (Foundation)

2. Libraries & SDKs (Developer Tools)

3. Components (Plug & Play UI)

Moderation with the Dashboard

Switching to an Open Source Model

Moving Forward

Contributions & Staying Updated

Turning Discord Threads Into SEO Gold: Making Your Discord Community Discoverable

How to Set Up the Replyke Discord Bot

Step 1: Add the Bot to Your Server

Step 2: Configure Channel Permissions

Step 3: Login or Signup to Replyke

Step 4: Create a Discord Board App

Step 5: Configure Channels for Syncing

Step 6: All Set!

How to Add a Comment Section to your ReactJS App (Vite/NextJS)

Part 1: Basic repository setup

Cleaning Up the Project Structure

Installing Tailwind CSS

Setting Up ShadCN

Part 2: Setting Up Replyke in Your Project

Steps:

Part 3: Creating Dummy Data

Render posts

Part 4: Adding the Comment Section

Installing the Social Comment Package

Ensuring Responsiveness

Creating a Media Query Hook

Creating the DiscussionSheet Component

Explanation of DiscussionSheet Component

Updating the App Component

Explanation of App Component Changes

Part 5: Integrating Authentication with Replyke

Understanding Replyke's Authentication

Critical Note on Security

Setting Up Environment Variables

Updated src/App.tsx

Logging Out

Key Rotation

Reports and Moderation Tools

Updated `src/App.tsx`

`CommentSectionSheet.tsx`

`CollectionsSheet.tsx`

Step 2: Integrate the Sheets in `app/_layout.tsx`

Step 3: Wire Up the Buttons in `PostActions.tsx`

Step 3: Implementing `CollectionsSheet.tsx`

Clean Up Screens in the `app` Folder

`app/_layout.tsx`

`app/index.tsx`

`app/_layout.tsx`

`app/index.tsx`

Explanation of the `CommentSectionSheet` Component