Tier A
RN-universal Progress pilot
ScaffoldedDeterminate horizontal progress bar. Pure View + View with percentage width — no Radix, no DOM observers. accessibilityRole='progressbar' with accessibilityValue translates to aria-valuemin/max/now on web.
Side-by-side: animated value
shadcn (Radix Progress)
0%
RN (View + View via RN Web)
0%
Fixed checkpoints
10%
33%
67%
100%
Custom max scale (e.g. modules completed)
34 / 62 modules
Semantics
| Aspect | shadcn | RN | Notes |
|---|---|---|---|
| Root element | <div role="progressbar"> | <View accessibilityRole="progressbar"> | Same role on web |
| Indicator | transform: translateX | width: % | Width is simpler and works on native without Animated |
| Value ARIA | aria-valuenow on root | accessibilityValue = {min,max,now} | RN Web translates to aria-valuemin/max/now |
| Clamping | developer responsibility | built-in (Math.min/max) | Runtime safety against invalid values |