# Build a Custom Screen Time Chart UI in React Native

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-08. 6 min read.
> Source: https://vp0.com/blogs/screen-time-chart-custom-ui-react-native

**TL;DR.** A custom screen-time chart in React Native is two problems, not one. The chart itself, daily or weekly usage bars with a selected-day detail, is a straightforward react-native-svg or chart-library build. The data is the hard part: Apple keeps per-app usage behind the DeviceActivity and Family Controls frameworks, which need an entitlement and only expose the numbers inside special extensions, so be honest about whether you are charting that restricted data or your own. Start from a chart template and wire it to the data you can actually read.

## A custom screen-time chart is really two things

A screen-time chart looks like one job and is actually two. There is the chart, daily or weekly usage as bars, with a tap to see one day in detail, and there is the data those bars draw from. The chart is the easy half. The data is where most projects stall, because on iOS the per-app usage numbers are not yours to read freely.

Separating the two up front saves a lot of grief. You can build a beautiful chart in an afternoon; getting real, allowed usage data into it is the part that needs a plan.

## The data problem: Apple locks per-app usage

This is the honest constraint. Apple keeps screen-time data behind the [DeviceActivity](https://developer.apple.com/documentation/deviceactivity) and [Family Controls](https://developer.apple.com/documentation/familycontrols) frameworks, and that access is gated. You request the Family Controls entitlement from Apple with a legitimate use, and even then the raw per-app numbers are exposed only inside special extensions, with privacy protections that keep them from flowing freely into your main app. You cannot simply read how long someone spent in other apps and plot it.

So a "custom screen-time chart" is one of two things, and you should know which you are building. Either you are charting DeviceActivity data inside the constrained context Apple allows, with the entitlement, or you are charting your own app's usage and self-reported time, which is unrestricted. Promising the first while building on assumptions from the second is the most common way these projects mislead users.

## Building the chart itself

The chart is the friendly part. A weekly view is seven bars, each a day, scaled to the largest value, with a baseline and labels. You can draw it directly with [react-native-svg](https://github.com/software-mansion/react-native-svg), which has more than 5,000,000 weekly downloads and gives you full control over the bars, the rounded caps, and the selection highlight, or reach for a chart library like [react-native-gifted-charts](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts) when you want bars, lines, and tooltips without drawing them yourself. Either way, keep the chart a pure function of its data so a day's value maps to a bar height and nothing else hides in the render.

The visual choices that matter are restraint: a clear unit, a sensible scale that does not exaggerate a quiet day, and a single highlighted bar for the selected day rather than a rainbow.

## The interactions: selecting a day, a range, a category

A usage chart earns its place through interaction. Tapping a bar selects that day and updates a detail area below, the per-app or per-category breakdown for just that day. A range switch moves between day, week, and month, rescaling the bars. And a category view groups apps into buckets like social, productivity, and entertainment, which is often more useful than a raw per-app list. Each of these needs an empty and loading state, because the first week has little data and the chart should say so rather than draw a flat, confusing baseline.

## Building it from a template

The bars, the selection, the range switch, and the detail area are the same in every usage chart, so they are worth starting from. A free [VP0](https://vp0.com) design ships the chart, the selected-day detail, the range switch, and the empty and loading states as a React Native file with a machine-readable source page, so pasting the link into Claude Code or Cursor gives the agent the chart structure to wire to your data source. The same charting pattern sits behind a [blood-pressure log chart](/blogs/blood-pressure-log-chart-ui-react-native/) and a [CGM glucose chart](/blogs/cgm-glucose-chart-ui-swiftui/), and the data-access side connects to the [iOS Screen Time and Family Controls UI](/blogs/ios-screen-time-api-family-controls-ui/).

## Common mistakes building a usage chart

The serious ones are about data, not drawing. Assuming you can read any app's usage without the Family Controls entitlement leads to a chart with no real data behind it. Charting self-reported time while implying it is system screen time misleads users. On the visual side, a scale that starts above zero exaggerates differences, a per-bar color scheme buries the selected day, and skipping the empty state makes a fresh install look broken. And doing data math inside the render path instead of preparing the series first makes the chart janky as the range grows.

## Key takeaways: a screen-time chart in React Native

- **It is two problems: the data and the chart.** Solve the data access first.
- **Apple gates per-app usage.** DeviceActivity and Family Controls need an entitlement and only expose data in constrained contexts.
- **Be honest about the source.** System screen time versus your own app's self-reported time are not the same chart.
- **Draw with react-native-svg or a chart library.** Keep the chart a pure function of a prepared data series.
- **Start from a chart template.** A free VP0 design gives an agent the bars, the selection, and the states to wire to your data.

## Frequently asked questions

**How do I build a custom screen-time chart UI in React Native?** Build it as two parts. Draw the chart, weekly usage bars with a tap-to-select detail, using react-native-svg or a chart library, keeping it a pure function of a prepared data series. Then solve the data: Apple keeps per-app usage behind the DeviceActivity and Family Controls frameworks, which need an entitlement and only expose data inside special extensions, so decide whether you are charting that restricted data or your own app's self-reported time. A free chart template gives you the bars, the selection, and the states to start from.

**What is the safest way to build this with Claude Code or Cursor?** Give the agent the chart template and be explicit about the data source. A free VP0 React Native design has a machine-readable source page with the bars, the selected-day detail, the range switch, and the empty and loading states, so Claude Code or Cursor wires your real series into a working chart. Tell it clearly whether the data is DeviceActivity behind the entitlement or your own tracked time, so it does not generate a chart that implies access the app does not have.

**Can VP0 provide a free React Native or SwiftUI template for a usage chart?** Yes. VP0 has free chart designs in React Native and SwiftUI with the bars, the selected-day detail, the range switch, and the empty and loading states already built, each exposing an AI-readable source page. Because the chart exists, your agent connects it to whatever data you can legitimately read instead of reinventing the drawing and the selection handling that usually trip up hand-built charts.

**Can I read other apps' screen time in React Native?** Not freely. Apple protects per-app usage behind the DeviceActivity and Family Controls frameworks, which require an entitlement you request with a legitimate use, and even then the data is only available inside constrained extensions with privacy protections, not readable straight into your main app. If you do not have that access, your chart should be built on your own app's usage or self-reported time, and it should say so rather than imply it is reading system-wide screen time.

**What common errors happen when vibe coding a usage chart?** Assuming you can read any app's usage without the entitlement is the big one, followed by charting self-reported time while implying it is system screen time. On the visual side, a scale that does not start at zero exaggerates differences, a multicolor bar scheme hides the selected day, and a missing empty state makes a fresh install look broken. Solve the data access honestly, prepare the series before rendering, and keep the chart a clean function of its data.

## Frequently asked questions

### How do I build a custom screen-time chart UI in React Native?

Build it as two parts. Draw the chart, weekly usage bars with a tap-to-select detail, using react-native-svg or a chart library, keeping it a pure function of a prepared data series. Then solve the data: Apple keeps per-app usage behind the DeviceActivity and Family Controls frameworks, which need an entitlement and only expose data inside special extensions, so decide whether you are charting that restricted data or your own app's self-reported time. A free chart template gives you the bars, the selection, and the states to start from.

### What is the safest way to build this with Claude Code or Cursor?

Give the agent the chart template and be explicit about the data source. A free VP0 React Native design has a machine-readable source page with the bars, the selected-day detail, the range switch, and the empty and loading states, so Claude Code or Cursor wires your real series into a working chart. Tell it clearly whether the data is DeviceActivity behind the entitlement or your own tracked time, so it does not generate a chart that implies access the app does not have.

### Can VP0 provide a free React Native or SwiftUI template for a usage chart?

Yes. VP0 has free chart designs in React Native and SwiftUI with the bars, the selected-day detail, the range switch, and the empty and loading states already built, each exposing an AI-readable source page. Because the chart exists, your agent connects it to whatever data you can legitimately read instead of reinventing the drawing and the selection handling that usually trip up hand-built charts.

### Can I read other apps' screen time in React Native?

Not freely. Apple protects per-app usage behind the DeviceActivity and Family Controls frameworks, which require an entitlement you request with a legitimate use, and even then the data is only available inside constrained extensions with privacy protections, not readable straight into your main app. If you do not have that access, your chart should be built on your own app's usage or self-reported time, and it should say so rather than imply it is reading system-wide screen time.

### What common errors happen when vibe coding a usage chart?

Assuming you can read any app's usage without the entitlement is the big one, followed by charting self-reported time while implying it is system screen time. On the visual side, a scale that does not start at zero exaggerates differences, a multicolor bar scheme hides the selected day, and a missing empty state makes a fresh install look broken. Solve the data access honestly, prepare the series before rendering, and keep the chart a clean function of its data.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*