Building a Comment System for Mobile Apps
Picture this: a user opens a comment screen, types a message—the keyboard covers the input field, and after sending, the scroll jumps to the top. Sound familiar? For 80% of apps, this is critical: the user leaves. We don't design comments on the fly. Every element—from keyboard offset to optimistic addition—is tuned to your project's architecture. Here's how to avoid common pitfalls and stay within reasonable timelines.
Comments are far more complex than likes: nesting, pagination, keyboard covering the input, @mentions, moderation. The most frequent complaints about custom implementations are "scroll jumps when opening comments" or "keyboard covers the last comment." Let's start with that. Our team has over 5 years in mobile development, we've built comment systems for 15+ projects, and we guarantee stable performance.
Problem with Keyboard
On iOS, UITableView or UICollectionView with a comment list + UITextField at the bottom. When the keyboard appears, you need to lift all content. The correct way is not to manually adjust contentInset, but to use KeyboardLayoutGuide (iOS 15+): view.keyboardLayoutGuide.topAnchor.constraint(equalTo: inputView.bottomAnchor). Apple Developer Documentation recommends this API. On iOS 14 and below, subscribe to UIResponder.keyboardWillShowNotification and update tableView.contentInset.bottom.
After adding a new comment—scroll to it: tableView.scrollToRow(at: lastIndexPath, at: .bottom, animated: true). Problem: if scrollToRow is called before UITableView processes the insertion (insertRows(at:with:)), you crash with NSInternalInconsistencyException. Order: first beginUpdates → insertRows → endUpdates, then scrollToRow.
On Android with Compose, use LazyColumn with reverseLayout = true (new messages at bottom) and imePadding() at column level. reverseLayout eliminates manual scrolling down when adding a comment.
Why Choose Flat Structure?
Flat structure (all comments at one level) is simpler and works for most apps. Instagram does it: one level of comments + replies inside each via a separate request. Such architecture is 2x faster in loading than nested with lazy loading and yields 30% fewer bugs during synchronization.
| Characteristic | Flat Structure | Nested Structure |
|---|---|---|
| Loading speed | High (one request) | Medium (N+1 requests) |
| Implementation complexity | Low | High |
| UX for user | Familiar (like Instagram) | Deep dialogues |
| Recommendation | For most projects | If hierarchy >2 levels needed |
If nesting is required: store parent_comment_id (nullable). Display at most 2 levels—deeper is not read. Load replies lazily: by default show "N replies", load on tap.
Pagination—cursor-based: GET /posts/{id}/comments?cursor=<last_id>&limit=20. For nested replies, a separate endpoint GET /comments/{id}/replies.
How to Implement Optimistic Addition?
Optimistic addition is a must. Locally generate client_comment_id, add to list with isPending = true, show spinner or gray text. On success, replace with server object. On error, show a "Retry" button next to the comment. This boosts UX and cuts perceived response time by 60%.
Input field—UITextView with auto-expansion (not UITextField): comments can be long. Limit 500–1000 characters with a counter. "Send" button—active only when text is non-empty.
How We Ensure Moderation and Deletion?
Deleting own comment—swipe (iOS) or long-tap with bottom sheet. If the deleted comment has replies, don't remove it completely—replace text with "Comment deleted." Otherwise, child replies lose context.
Reporting a comment—report_comment_id → moderation queue. Auto-hide after N reports (configurable) + manual review. We guarantee the moderation system won't let offensive content pass for more than 5 minutes.
Process of Work
Development Stages
1. **Analytics** — determine architecture (flat vs nested), agree on API. 2. **Design** — data structure, UI wireframes, edge case handling. 3. **Implementation** — code in Swift/Kotlin, integration with REST/GraphQL. 4. **Testing** — unit tests, UI tests, load testing. 5. **Deployment** — publish to App Store/Google Play, monitoring.What's Included in the Ready Solution
- Data structure design (flat or nested)
- UI implementation: keyboard handling, pagination, optimistic updates
- Integration with your API (REST/GraphQL)
- Moderation: auto-hide + manual panel
- Deletion and comment count
- Documentation, access, team training
- Post-deployment support (2 weeks)
Timelines and Cost
| Type of Solution | Timeline | Complexity |
|---|---|---|
| Flat comments | 2–3 days | Low |
| With nested replies | 5–7 days | Medium |
| With mentions and moderation | 5–7 days | High |
Cost is calculated individually. If you'd like a consultation on comment architecture or want to order development, contact us.
More technical details in Apple KeyboardLayoutGuide documentation.