Skip to main content

Hashtags in the TikTok-Style React Native App

Hashtags connect composer captions to discover and feed surfaces. They are usually extracted on post creation, stored with the post, and indexed in Firestore so the app can group or query related posts.

Quick Answer​

When a user creates a post, the app parses hashtags from the caption, stores the array on the post payload, writes hashtag index documents if the backend/provider supports it, then the discover screen groups or queries posts by hashtag.

Composer Flow​

The post composer usually performs this sequence:

  1. user enters caption text;
  2. app extracts hashtag tokens such as #travel;
  3. app normalizes tokens if needed;
  4. app includes hashtags in the post object;
  5. post API writes the post and related hashtag index data;
  6. feed/discover screens read the resulting data.

Search the app source:

rg "hashtag|hashtags|findHashtag|findHashtags|Discover" src

Avoid relying on fixed line numbers because generated app versions can move code between screens, hooks, and core provider files.

Suggested Hashtag Parser Rules​

For production apps, define consistent behavior:

  • keep hashtags case-insensitive for search;
  • preserve original display text if needed;
  • strip trailing punctuation;
  • reject empty tags;
  • limit the number of tags per post;
  • avoid indexing private or deleted posts;
  • moderate abusive tags if the app allows public UGC.

Firestore Shape​

Exact collection names can vary, but common patterns include:

posts/{postId}
entities/social_feeds_hashtags/{hashtag}/posts/{postId}

or a similar hashtag index collection.

The post document should keep enough metadata for display:

{
  authorID: 'user-id',
  postMedia: [...],
  caption: 'Beach day #travel',
  hashtags: ['travel']
}

Discover Screen​

The discover screen can either:

  • read grouped hashtag index collections; or
  • load recent posts and group them client-side for small datasets.

For production feeds, prefer indexed queries with Firestore indexes and limits. Avoid loading a large global feed only to group it on the client.

Verification Checklist​

  • Caption parser extracts expected tags.
  • Post document contains a hashtags array or equivalent field.
  • Hashtag index documents are created if the app uses them.
  • Discover screen shows grouped hashtag sections.
  • Tapping a hashtag shows related posts.
  • Deleted or blocked content is removed from public hashtag surfaces.

Troubleshooting​

ProblemFix
Hashtags are not savedCheck composer payload and post API write.
Discover screen is emptyCreate posts with hashtags and deploy required indexes.
Different casing creates duplicatesNormalize tags before writing indexes.
Feed query needs an indexCreate the Firestore index from the error link or deploy indexes.
Blocked content still appearsAdd cleanup logic and rules for hidden/deleted posts.

Next Steps​