Open
Description
Current behaviour
In 6.x the theme's color roles are typed ColorValue (with DynamicLightTheme and DynamicDarkTheme on Android they are PlatformColor values), but several color props are still typed string, so passing a theme color to them fails to type-check:
error TS2322: Type 'ColorValue' is not assignable to type 'string | undefined'.
Type 'OpaqueColorValue' is not assignable to type 'string | undefined'.
Props typed string on main (8cb344b):
ProgressBar:colorAppbar.Content:colorAvatar.Icon,Avatar.Text:colorBottomNavigation,BottomNavigation.Bar:activeColor,inactiveColorTouchableRipple:underlayColorSegmentedButtons(and each button):checkedColor,uncheckedColorRadioButton,RadioButton.Item:color,uncheckedColorCheckbox.Item:color,uncheckedColor
Expected behaviour
Paper's color props accept ColorValue, so <ProgressBar color={colors.primary} /> type-checks as it did in 5.x, and each component handles a PlatformColor value at runtime (no string-only color math on it).
How to reproduce?
const { colors } = useTheme();- Render
<ProgressBar progress={0.5} color={colors.primary} />. - Run
npx tsc --noEmitwith react-native-paper frommain.
Preview
n/a (a type error)
What have you tried so far?
A cast (colors.primary as string) silences the error, but it is wrong for PlatformColor values.
Your Environment
| software | version |
|---|---|
| react-native | 0.83.6 |
| react-native-paper | main (8cb344b) |
| expo sdk | 55 |
| typescript | 5.9.3 |
Activity
JaydeepAgravat commentedon Nov 6, 2026
Hi @Doberjohn! I'd be happy to help with this if you're not already on it.
I'd change the listed props to
ColorValueand go through each component for places that do string-only color math (color(...), alpha, concatenation), so aPlatformColordoesn't break at runtime. Since the 6.0 PRs land in the order in #5150, I can split it into small PRs (for example ProgressBar/Appbar/Avatar first) or keep it as one, whichever is easier to review alongside #5097.