[DoodleBears]

Requested by Vain · project thread

Why the change

On Android the app drew its own segmented control, slider, chips and radio dots, and used an AppCompat switch, even though Material 3 has native components for all of them. DESIGN.md → Native first and the android-material skill (#2339, #2338) say to use them.

Refs: the first focused PR from the Android Material 3 audit in the project thread. Main is merged in, including #2349's native segmented controls.

Special things to note

• Merge risk: JS only and Android only. @expo/ui 58's Jetpack Compose components already ship in the installed build, and no native inputs change. Each new *.android.tsx can be deleted on its own to revert that control.
• Merging feat(mobile): plain sheet titles, native segmented controls and a lighter chat soft edge #2349: main added a plain Compose segmented.android.tsx. This branch keeps its version, which adds the remount fix, the large-text radio fallback and the transparent unselected container, and now takes SegmentedProps from segmented.tsx. segmented-native.test.tsx from main passes against it.
• Fixes found on the emulator and included here:
  • The Usage row drew a rounded inner corner on its first render, because the Compose row read the option count only once. The row is now rebuilt when the options change.
  • At the largest system text, "4 weeks" and "12 weeks" wrapped mid-word and the segments ended up with uneven heights. Segment labels are now single-line. When the labels cannot fit on one row at the current text size, Segmented becomes a radio list of the same options.
  • In dark mode, unselected segments and chips read as black holes. They now use a transparent container with a visible outline, which is M3's default.
• Verification:
  • pnpm lint, mobile and root tsc, oxfmt and vitest apps/mobile/test (119 files passed, 7 skipped), including material-controls-android.test.tsx and segmented-native.test.tsx.
  • Same checklist on two devices, light and dark, default and largest (2.0) text, dev client built from main 55c8848 plus this PR and fix(mobile): Android Back closes in-screen surfaces first #2343. Everything passed on both:
    • Android 16 emulator (API 36, gesture navigation).
    • Physical Xiaomi phone (Android 16 / HyperOS 3, arm64, Chinese UI).
  • What was checked:
    • Usage segments: only the outer ends are rounded, and the unselected segments are transparent with an outline in both themes. At 2.0 they fall back to a radio list (Today / 7 days / 4 weeks / 12 weeks), one per line, with nothing cut off.
    • Activity filter sheet: radios and the Unread only switch work, and nothing is cut off at 2.0.
    • Chat background Type, Preview and Fill/Fit rows plus the slider (60→90% on the emulator, 60→88% on the phone).
    • Computer look chips and routine cadence and day chips: outlined with a transparent container, and the selected state is correct.
• CI test plan: affected (mobile only).

Change outline

• On Android:
  • Segmented uses Compose SingleChoiceSegmentedButtonRow, with a radio-list fallback at large text.
  • PercentageSlider uses Compose Slider.
  • Chip uses FilterChip.
  • The Activity options sheet uses a leading Compose RadioButton through RadioMark.
  • Unread only uses Toggle, which is Compose Switch on Android.
• DESIGN.md: the primitives list and the Activity options rule name the Android components and the fallback.

Physical phone (Xiaomi, Android 16; status bar and computer name redacted). All 16 captures are in .github/pr-screenshots/2342-android-material/phone/.

Usage, light	Usage, dark	Usage, largest text	Activity filter, dark
2342-android-material/phone/usage-light.png	2342-android-material/phone/usage-dark.png	2342-android-material/phone/usage-font200-light.png	2342-android-material/phone/activity-filter-dark.png

Background slider, dark	Look chips, dark	Routine chips, light	Activity filter, largest text
2342-android-material/phone/bg-slider-dragged-dark.png	2342-android-material/phone/look-chips-dark.png	2342-android-material/phone/routine-chips-light.png	2342-android-material/phone/activity-filter-font200-light.png

Android 16 emulator:

Screen	Light	Dark
Usage	2342-android-material/usage-light.png	2342-android-material/usage-dark.png
Activity filter	2342-android-material/activity-filter-light.png	2342-android-material/activity-filter-dark.png
Unread only (on / off)	2342-android-material/activity-unread-on-light.png	2342-android-material/activity-unread-off-dark.png
Chat background	2342-android-material/bg-top-light.png	2342-android-material/bg-top-dark.png
Background slider, 90%	2342-android-material/bg-slider-dragged-light.png	2342-android-material/bg-slider-dragged-dark.png
Computer look chips	2342-android-material/look-chips-light.png	2342-android-material/look-chips-dark.png
Routine chips	2342-android-material/routine-chips-light.png	2342-android-material/routine-chips-dark.png

https://claude.ai/code/session_01SJ8gcMTgoRjSRBNFswZT9T

---

Generated by Claude Code

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 23 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 2 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 479676a4-18e4-40d2-aa78-5b3e6852764f

📥 Commits

Reviewing files that changed from the base of the PR and between a204016 and 15aa893.

⛔ Files ignored due to path filters: 32

• .github/pr-screenshots/2342-android-material/activity-filter-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/activity-filter-font200-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/activity-filter-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/activity-unread-off-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/activity-unread-on-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/bg-slider-dragged-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/bg-slider-dragged-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/bg-top-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/bg-top-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/look-chips-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/look-chips-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/activity-filter-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/activity-filter-font200-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/activity-filter-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/activity-unread-off-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/activity-unread-on-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/bg-slider-dragged-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/bg-slider-dragged-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/bg-top-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/bg-top-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/look-chips-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/look-chips-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/routine-chips-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/routine-chips-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/usage-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/usage-font200-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/phone/usage-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/routine-chips-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/routine-chips-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/usage-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/usage-font200-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/usage-light.png is excluded by !**/*.png

📒 Files selected for processing: 9

• apps/mobile/DESIGN.md
• apps/mobile/src/ui/primitives/chip.android.tsx
• apps/mobile/src/ui/primitives/percentage-slider.android.tsx
• apps/mobile/src/ui/primitives/radio-mark.android.tsx
• apps/mobile/src/ui/primitives/radio-mark.tsx
• apps/mobile/src/ui/primitives/segmented.android.tsx
• apps/mobile/src/ui/shell/activity-filters.tsx
• apps/mobile/test/material-controls-android.test.tsx
• changes/2342-android-material-controls.md

📝 Walkthrough

This change adds Android Material 3 primitives for chips, sliders, and radio marks. Segmented controls now switch to a radio list when labels do not fit. Activity filters use shared radio and toggle controls.

Changes: Android Material controls

Layer / File(s)	Summary
Add native Material controls apps/mobile/src/ui/primitives/chip.android.tsx, apps/mobile/src/ui/primitives/percentage-slider.android.tsx, apps/mobile/src/ui/primitives/radio-mark.tsx, apps/mobile/src/ui/primitives/radio-mark.android.tsx, apps/mobile/test/material-controls-android.test.tsx, apps/mobile/DESIGN.md, changes/2342-android-material-controls.md	Added themed Android chip and slider components and shared radio-mark components. The slider supports accessibility adjustments in five-point steps. Tests cover slider adjustments and decorative radio rendering. The design inventory and changelog describe the controls.
Render segmented options responsively apps/mobile/src/ui/primitives/segmented.android.tsx, apps/mobile/test/material-controls-android.test.tsx	Segmented controls render as a Compose row when labels fit. When they do not fit, the control renders a radio list. Tests cover selection, option changes, and fallback at increased font scale.
Use shared controls in Activity filters apps/mobile/src/ui/shell/activity-filters.tsx, apps/mobile/DESIGN.md	Activity option indicators now use RadioMark on non-iOS platforms. The unread-only filter now uses Toggle with a label and raised styling; its filter update behavior remains unchanged.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to ff99f

No demonstrated issue with the new Android controls currently blocks merging.

Pre-merge checks: 3 · 2

Failed checks: 2 warnings

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 12 functions across 7 files. (2 skipped: 2…	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check		The description covers the change purpose, issue reference, merge risk, verification commands, CI plan, change outline, Android runtime checks, and screenshot paths. It does not satisfy the required E…	Add the complete iOS and Android acceptance matrix for default, intermediate, and maximum system font sizes in light and dark modes. Record native interactions and matching screenshots for each case. List every blocked or unrun case separat…

Passed checks: 3 passed

Check name	Status	Explanation
Title check		The title is concise and clearly identifies the main change: adding Material 3 selection controls on Android.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 12 functions across 7 files. (2 skipped: 2 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

Full details: Description check

Explanation

The description covers the change purpose, issue reference, merge risk, verification commands, CI plan, change outline, Android runtime checks, and screenshot paths. It does not satisfy the required Expo/React Native acceptance matrix because it omits iOS results, intermediate font-size results, explicit light/dark coverage for every required font-size case, and a separate list of blocked or unrun cases. The screenshots are referenced by file paths rather than embedded GitHub-rendered images.

Resolution

Add the complete iOS and Android acceptance matrix for default, intermediate, and maximum system font sizes in light and dark modes. Record native interactions and matching screenshots for each case. List every blocked or unrun case separately. Embed sanitized before/after screenshots in the description, or document the concrete capture blocker and runnable review path.

✨ Finishing Touches: 💡 1

📝 Generate docstrings: 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🔇 Additional comments: 10

apps/mobile/src/ui/primitives/radio-mark.tsx: 1

1-32: LGTM!

apps/mobile/src/ui/primitives/radio-mark.android.tsx: 1

1-18: LGTM!

apps/mobile/src/ui/primitives/chip.android.tsx: 1

1-39: LGTM!

apps/mobile/src/ui/primitives/percentage-slider.android.tsx: 1

1-55: LGTM!

apps/mobile/test/material-controls-android.test.tsx: 1

1-195: LGTM!

apps/mobile/DESIGN.md: 1

47-47: LGTM!

Also applies to: 288-288

changes/2342-android-material-controls.md: 1

1-11: LGTM!

apps/mobile/src/ui/primitives/segmented.android.tsx: 2

48-85: LGTM!

Also applies to: 87-117

---

40-47: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

⚠️ Unverified finding
Verification ran but could not confirm this finding. It is shown for review, not as a verified issue.

Measure the container width, not the window width.

segmentsFit receives useWindowDimensions().width and subtracts a fixed space.x5 * 2 margin. The real space for a Segmented is its parent's width. A drawer page, a SheetStack page or a padded settings group can have more than space.x5 of horizontal inset. In that case the estimate says the labels fit, but they do not. The row then renders, and ComposeText maxLines={1} softWrap={false} clips the labels. DESIGN.md Line 288 says this must never happen.

labelWidth uses 0.5 em per Latin character. That value is close to the Roboto average, so wide labels have little error margin. A container measurement removes the inset error, which is the larger one.

Read the width from onLayout on the outer View. Fall back to the window width until the first layout arrives.

♻️ Proposed change

-  const { width, fontScale } = useWindowDimensions();
+  const window = useWindowDimensions();
+  const [measured, setMeasured] = useState<number | undefined>();
+  const width = measured ?? window.width - space.x5 * 2;
+  const fontScale = window.fontScale;

Change segmentsFit so that it compares against width directly, without subtracting space.x5 * 2. Add onLayout={(e) => setMeasured(e.nativeEvent.layout.width)} to the outer View in both branches.

apps/mobile/src/ui/shell/activity-filters.tsx: 1

2-12: LGTM!

Also applies to: 70-70, 205-209

---

ℹ️ Review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 37c8ec7f-39df-484c-9a37-e2d16d54c0a0

📥 Commits

Reviewing files that changed from the base of the PR and between d03e2cb and ff99f81.

⛔ Files ignored due to path filters: 16

• .github/pr-screenshots/2342-android-material/activity-filter-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/activity-filter-font200-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/activity-filter-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/activity-unread-off-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/activity-unread-on-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/bg-slider-dragged-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/bg-slider-dragged-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/bg-top-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/bg-top-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/look-chips-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/look-chips-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/routine-chips-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/routine-chips-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/usage-dark.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/usage-font200-light.png is excluded by !**/*.png
• .github/pr-screenshots/2342-android-material/usage-light.png is excluded by !**/*.png

📒 Files selected for processing: 9

• apps/mobile/DESIGN.md
• apps/mobile/src/ui/primitives/chip.android.tsx
• apps/mobile/src/ui/primitives/percentage-slider.android.tsx
• apps/mobile/src/ui/primitives/radio-mark.android.tsx
• apps/mobile/src/ui/primitives/radio-mark.tsx
• apps/mobile/src/ui/primitives/segmented.android.tsx
• apps/mobile/src/ui/shell/activity-filters.tsx
• apps/mobile/test/material-controls-android.test.tsx
• changes/2342-android-material-controls.md

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 0 remain after this review.