Skip to content

feat: add reading progress indicator to ArticleScreen#1030

Open
bharathichethanamn wants to merge 1 commit into
SB2318:mainfrom
bharathichethanamn:main
Open

feat: add reading progress indicator to ArticleScreen#1030
bharathichethanamn wants to merge 1 commit into
SB2318:mainfrom
bharathichethanamn:main

Conversation

@bharathichethanamn
Copy link
Copy Markdown

What changed
Added a thin animated horizontal progress bar to ArticleScreen that fills left to right as the user scrolls through an article.

File modified

frontend/src/screens/article/ArticleScreen.tsx

How it works

A 3px progress bar sits between the article image and the scroll content

As the user scrolls, onScroll computes contentOffset.y / (contentSize.height - layoutMeasurement.height) and animates the bar width using Animated.timing

Bar resets to 0 when navigating to a new article

scrollEventThrottle={16} added for smooth 60fps updates on iOS

No new dependencies — only uses Animated from React Native core which was already available.

Checklist

Progress bar visible below article image

Fills proportionally as user scrolls

Resets on new article navigation

Uses PRIMARY_COLOR, no overlap with existing UI

readEventSave / read-tracking behavior fully preserved

Zero new npm dependencies

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 2, 2026

Thank you @, for creating the PR and contributing to our UltimateHealth project 💗.
Our team will review the PR and will reach out to you soon! 😇
Make sure that you have marked all the tasks that you are done with ✅.
Thank you for your patience! 😀

@SB2318
Copy link
Copy Markdown
Owner

SB2318 commented Jun 4, 2026

@bharathichethanamn please mention your issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants