Type '{ rippleColor: any; }' is not assignable to type 'ColorValue | null

I am trying to learn reactnative(expo) with typescript and I have an issue where typescript shows me the following error Type '{ rippleColor: any; }' is not assignable to type 'ColorValue | null | undefined' while adding android_ripple color. How do I solve this?

my component

import { Pressable, Text, View } from "react-native";
const Button = ({
    rippleColor,
    }) => {
    return (
     <View>
      <Pressable
        disabled={disabled}
        android_ripple={{ color: { rippleColor }, borderless: true }} //here is where typescript complains
        onPress={onPress}
         >
        <Text>
          {text}
        </Text>
      </Pressable>
    </View>
  );
};

CodePudding user response：

You need to add types to the props your component is receiving. Pressable is expecting a type of 'ColorValue | null | undefined', as Typescript is telling you. So your props should look like: { rippleColor: ColorValue | null | undefined }.

Furthermore, you were passing the color like this: color: { rippleColor }. This is likely a mistake, because it's a shorthand for:

color: {
  rippleColor: rippleColor,
},

What you likely want is to pass the entire prop as the color attribute, i.e. color: rippleColor.

Here is the whole component after the change:

import { Pressable, Text, View } from "react-native";

type Props = {
  rippleColor: ColorValue | null | undefined;
};

const Button = ({
  rippleColor,
}: Props) => {
  return (
    <View>
      <Pressable
        disabled={disabled}
        android_ripple={{ color: rippleColor, borderless: true }}
        onPress={onPress}
      >
        <Text>
          {text}
        </Text>
      </Pressable>
    </View>
  );
};