react-native-elements/react-native-elements
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 29, 2026
More findings
Verdict
Clean structural instincts undone by two silence choices: one color, one suppressed error, both hiding signal that should be loud. The blue-on-blue status labels are the bigger design failure since they defeat the whole point of a status system.
Files Rams reviewed
website/src/pages/help.tsx
website/src/pages/team.tsx
website/src/pages/versions.tsx
example/src/components/header.tsx
example/src/views/Divider.tsx
example/src/views/avatars.tsx
example/src/views/badge.tsx
example/src/views/bottomsheet.tsx
example/src/views/buttons.tsx
example/src/views/cards.tsx
example/src/views/checkbox.tsx
example/src/views/chips.tsx
example/src/views/dialogs.tsx
example/src/views/fab.tsx
example/src/views/fonts.tsx
example/src/views/image.tsx
example/src/views/linearProgress.tsx
example/src/views/lists/content.tsx
example/src/views/lists2.tsx
example/src/views/login/screen2.tsx
example/src/views/login/screen3.tsx
example/src/views/overlay.tsx
example/src/views/pricing.tsx
example/src/views/profile.tsx
example/src/views/ratings.tsx
example/src/views/settings.tsx
example/src/views/skeleton.tsx
example/src/views/sliders.tsx
example/src/views/social_icons.tsx
example/src/views/speedDial.tsx
Color
example/src/views/badge.tsx:45
"Error" label renders in the same blue as "Success", erasing status meaning
In the Mini Badge text row, all four labels ('Success', 'Error', 'Primary', 'Warning') are styled with the identical color: '#397af8'. The Badge components above them (lines 36-39) presumably shift color per status, but this plain-text row directly under it uses one flat blue for every state, including the one meant to read as failure.
Why it matters
When a status label carries no color distinction, a user scanning the row can't tell 'Error' from 'Success' without reading every word individually, which defeats the purpose of a status system and slows down error recognition.
Fix
Map each status label's text color to its corresponding semantic token so 'Error' reads visually distinct from 'Success'.
<Text style={{ color: '#397af8', paddingVertical: 10 }}>Success</Text>
<Text style={{ color: '#397af8', paddingVertical: 10 }}>Error</Text>
<Text style={{ color: '#397af8', paddingVertical: 10 }}>Primary</Text>
<Text style={{ color: '#397af8', paddingVertical: 10 }}>Warning</Text><Text style={{ color: theme.colors.success, paddingVertical: 10 }}>Success</Text>
<Text style={{ color: theme.colors.error, paddingVertical: 10 }}>Error</Text>
<Text style={{ color: theme.colors.primary, paddingVertical: 10 }}>Primary</Text>
<Text style={{ color: theme.colors.warning, paddingVertical: 10 }}>Warning</Text>Craft
example/src/views/badge.tsx:63
@ts-ignore hides a real prop mismatch on 'BadgedIcon' from the compiler
The BadgedIcon usage at line 75 is preceded by {/* @ts-ignore */}, suppressing whatever type error TypeScript is raising on its props instead of fixing the prop signature or type definition.
Why it matters
Suppressing the error means the compiler can no longer catch a real breakage here; a future prop rename or type change on BadgedIcon ships silently broken until it fails at runtime.
Fix
Fix the underlying type mismatch on BadgedIcon's prop definition instead of suppressing the compiler check.
{/* @ts-ignore */}
<BadgedIcon type="ionicon" name="chatbubble-ellipses" /><BadgedIcon type="ionicon" name="chatbubble-ellipses" />Accessibility
Typography
Spacing
Components
Motion
UX
Working well
- The Badge components in the Mini Badge row (status="success", "error", "primary", "warning") differentiate by the Badge component's own status-driven color, which is the right pattern even though the plain text labels beneath them don't follow suit.
- The demo cleanly isolates one variant per section (horizontal, inset, vertical, subheader), which is exactly what a component showcase should do: one concept per screen region, no mixed concerns.
- Grouping avatars into labeled sections ('Photo Avatars', 'Icon Avatars', 'Letter Avatars', 'Badged Avatars') via SubHeader gives the showcase clear scan order without needing extra chrome.
Scored July 29, 2026 with Rams Engine v0.0.3 · Engine changelog
This page is an automated design review of react-native-elements/react-native-elements’s UI code: 30 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
