Why Doesn’t the TypeScript ColorValue Type Allow Numeric Colors in React Native?

[polovi]

In React Native, numeric color values (e.g., 0xff00ff00 for RGBA color) are valid and work at runtime. However, the TypeScript type ColorValue only allows string, which leads to type errors when using numeric colors:

<View style={{ backgroundColor: 0xff0000ff }} />  // Works at runtime, but TypeScript complains

Since React Native itself supports numeric colors, why isn't ColorValue defined to allow them? Is there a specific reason for this restriction, or is it an oversight in the type definitions?

What’s the best way to handle this in a TypeScript project without disabling type checking?

Thanks!

[mdenitti]

Great question! This is a known limitation in the React Native type definitions. Here are the best approaches to handle this without disabling type checking:

Option 1: Type assertion (Simplest)

You can use a type assertion to cast the numeric color:

const color = (0xff000ff as unknown as string);
<View style={{ backgroundColor: color }} />

Option 2: Update the ColorValue type definition

Create a custom type in your project's type definitions:

type ExtendedColorValue = string | number | undefined;

Then use this type where you need numeric colors.

Option 3: Create a color utility helper

const formatColor = (color: string | number): string => {
  return typeof color === 'number' ? `#${color.toString(16)}` : color;
};

Option 4: Contribute to React Native types

Consider opening a PR to the React Native type definitions to include number in the ColorValue type. React Native does support numeric colors at runtime, so the types should reflect this.

The best long-term solution would be Option 4, as it would fix the issue for all developers using React Native with TypeScript!