Get color as string typed value

[fumiki]

Now I'm migrating tailwind-rn from 3.x to 4.2.0.

In 3.x, we could get string typed color value from tailwind to pass it component as props like this.

const Button: FC<{ color: string, text: string}> = () => {
 ...
}

<Button
  text="See more"
  color={getColor('gray-200')}
/>

However, by 4.x way, type of color is 'unknown' and so we can no longer use it the way we used to..

<Button
  text="See more"
  color={tailwind('text-gray-200').color} // ERROR (Can't assign 'unknown' type value to  'string' type prop)
/>

Is there any way to solve this problem? Or should I just give up on this problem?

I thought about modifying the type.d.ts and sending a pull request, but so far it hasn't worked.

export declare type Style = Record<string, unknown>; // current

export declare type Style = Record<string, unknown> | Partial<Record<'color', string>>; // not work
export declare type Style = Record<string, unknown> & Partial<Record<'color', string>>; // not work
export declare type Style = Partial<(Record<string, unknown> | Record<'color', string>)>; // not work
export declare type Style = Partial<(Record<string, unknown> & Record<'color', string>)>; // not work

Thanks!

[kneza23]

Yeah, i was wondering how to solve this also? @fumiki have you found a solution?

[fumiki]

@kneza23 No, unfortunately, I don't know the solution yet.
When I have more time, I would like to investigate various ways to resolve the type, but I don't know when that will be...

[carlossalasamper]

I have the same problem. I don't know why they have removed the getColor function, in my opinion the API was more comfortable that way.

would it be possible to add a second hook like "useColor"?

[agjini]

Is there a way to create a useColor hook to be able to get a colour value? Some components require to set colours as attributes like react-native-calendars

[agjini]

I've created the following hooks. Maybe its not optimum but it works.

hooks.ts

export function useColor() : ((colorName: string) => string) {
  const tailwind = useTailwind();
  return (colorName) => (tailwind(`text-${colorName}`) as any).color;
}

And how to use it :

[...]
import { useColor } from "@/api/hooks";

export function ComponentExample() {
    const [markedDates, setMarkedDates] = useState<MarkedDate>({});
    const tailwind = useTailwind();
    const getColor = useColor();

    return (
    <View style={tailwind("h-full flex flex-col")}>
      <CalendarList
        pastScrollRange={50}
        futureScrollRange={50}
        scrollEnabled
        showScrollIndicator
        onDayPress={async (day) => {
          await navigation.navigate("Quizz", { date: day.dateString as TimesheetDate });
        }}
        theme={{
          textSectionTitleColor: getColor("gray-800"),
          textSectionTitleDisabledColor: getColor("gray-400"),
          todayBackgroundColor: getColor("blue-400"),
          todayTextColor: getColor("gray-200")
        }}
        disabledDaysIndexes={[0, 6]}
        markedDates={markedDates}
      />
    </View>
    );
}