Home Feed with Bottom Tab Navigation (iOS)

Based on real screens from Reddit, Medium, BuzzFeed, and Neverthink on Mobbin.

BuzzFeed runs the classic 5-tab bar: Home, News, Shopping, Quizzes, Search — outline icons with text labels, active tab tinted in the brand gradient/purple, inactive tabs gray, on a white bar above the home indicator.
Medium uses 4 icon-only tabs (home, search, bookmarks, profile avatar); the active tab is the filled icon variant, inactive are outlines. Its dark-mode home keeps the identical structure — tab bar sits on the dark surface with the same filled/outline logic.
Reddit uses 5 icon-only tabs with a center "+" create tab; active = filled black glyph.
Neverthink reduces to 3 tabs (profile, grid/browse, favorites) with the middle browse tab active in cyan — viable only because the app has very few top-level areas.
Home/primary feed is always the first (leftmost) tab and the launch tab.

Medium: large-title "Home" top-left with a notification bell top-right (bell carries a green unread dot in dark mode).
Reddit: compact header with avatar (status-dotted) left, full-width search field center, coin/reward icon right.
BuzzFeed: centered brand logo, settings gear left, "Sign In" text button right.
The header scrolls away or condenses; the tab bar never moves.

Medium's light feed: a horizontally scrollable chip row — leading "+" chip to add topics, "For you" as a filled dark pill (selected), "Following" and topic chips ("Immigration") as light gray pills.
Reddit: text tabs "News · Home · Popular" with an underline indicator on the active one.
BuzzFeed: scrollable underline tabs ("Recently Viewed, Latest, Trending, …") including a yellow "NEW" badge chip; its quiz feed shows the same strip scrolled mid-list (Health, LGBTQ, Music…), with the active item underlined in purple.
This chip/underline strip is the standard way to fork one feed into personalized/temporal variants without new tabs.

Medium's list cell: author byline row (tiny avatar + name + publication) → bold 2–3 line headline → gray metadata row (date, read time) → small square thumbnail right-aligned; bookmark and overflow "…" actions per cell. Text leads, image supports.
BuzzFeed uses a 2-column card grid: large image on top, headline below, category badge ("QUIZ") overlaid on the image corner.
Medium (dark) shows a green circular compose FAB floating above the tab bar, bottom-right — creation kept out of the cell layout.
Neverthink uses a full-bleed media player pinned top with a channel grid beneath — feed-as-player variant.

Medium's skeleton screen mirrors the real cell geometry exactly: gray avatar circle, headline bars, thumbnail block — header, chip row, and tab bar all render immediately.
BuzzFeed's skeleton does the same with gray card blocks in the grid; Reddit shows a centered branded spinner with chrome (search, tabs, tab bar) already interactive. Skeletons that preserve layout read as faster than spinners.

Use 3–5 bottom tabs; put the primary feed first and land there on launch.
Pair icons with labels unless the icons are unambiguous (home, search, profile); when going icon-only, use filled-vs-outline plus tint to mark the active tab.
Keep the tab bar persistent and stationary; scroll or collapse the header instead.
Reserve the tab bar for top-level destinations; feed variants (For you / Following / topics) belong in a horizontal chip or underline-tab row directly under the header.
Make the selected chip visually inverted (filled dark pill vs light gray pills, per Medium) — underline alone is weak at chip size.
In feed cells, lead with the headline; keep thumbnails small and right-aligned for text-first content, or use image-top card grids for visual content.
Give every cell a metadata line (source, time, engagement) in ~12–13pt gray, and an overflow "…" for per-item actions.
Put creation behind a FAB (Medium) or a dedicated center tab (Reddit) — never buried in a menu if it's the core action.
Ship skeleton screens matching the final layout; render header, chips, and tab bar instantly while content loads.
Badge sparingly: a small dot on the bell (Medium) or one "NEW" chip (BuzzFeed) — single-point notifications, not counts everywhere.

Don't

Don't exceed 5 tabs or hide tabs behind a "More" item at this nav level.
Don't move top-level destinations into the chip row or vice versa — the two rows have distinct jobs.
Don't block the whole screen with a spinner when chrome could already be interactive (Reddit's spinner is the weakest loading pattern seen here).
Don't mix underline tabs and pill chips in the same strip; pick one selected-state language.

Unlabeled ambiguous tabs (Neverthink): a grid icon and heart with no labels force guessing; fine at 3 tabs, hostile at 5.
Auth action stranded in the header (BuzzFeed's "Sign In" top-right): easy to miss; sign-in prompts convert better contextually (on save/comment attempts).
Chip row overflow with no affordance (BuzzFeed): the category strip cuts off mid-word ("Coronavi…") — acceptable, but only because truncation itself signals scrollability; avoid ending strips exactly at a chip boundary.
Spinner-only first paint (Reddit): perceived load time is worse than skeleton equivalents in the same corpus.