Interpolating color of a custom Animated component in react native

I created a custom animated component in react native like this:

  const AnimatedPath = Animated.createAnimatedComponent(Path);

where Animated is imported from react-native and Path is imported from react-native-svg.

I created an animated component so that i can interpolate its color property like this:

const colors = {
    white: "#FFFFFF",
    green_300: '#34CB65'
}

 const fill = translateX.interpolate({
    inputRange: [-width / 3, 0, width / 3],
    outputRange: [colors.white, colors.green_300, colors.white],
  });

and use it like this:

<Svg
  width={35}
  height={35}
  viewBox="0 0 14 14"
  fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <AnimatedPath
    d="M4.587 4.902a9.735 9.735 0 001.897 2.673 9.735 9.735 0 002.674 1.898c.083.04.124.06.177.075a.697.697 0 00.575-.098c.044-.032.082-.07.159-.146.233-.233.35-.35.466-.426a1.333 1.333 0 011.454 0c.117.076.234.193.467.426l.13.13c.354.354.531.531.627.722.192.378.192.825 0 1.203-.096.19-.273.367-.627.722l-.106.105c-.353.353-.53.53-.77.664-.266.15-.68.258-.985.257-.275-.001-.463-.055-.84-.161a12.693 12.693 0 01-5.522-3.25 12.692 12.692 0 01-3.249-5.522c-.107-.376-.16-.564-.16-.84-.002-.305.106-.719.255-.985.135-.24.312-.417.665-.77l.105-.105c.354-.354.531-.531.722-.627a1.333 1.333 0 011.203 0c.19.096.368.273.722.627l.13.13c.233.233.35.35.426.467a1.333 1.333 0 010 1.453c-.077.118-.193.234-.426.467-.076.076-.114.115-.146.16a.697.697 0 00-.098.574c.015.052.035.094.075.177z"
    fill={fill}
    stroke={fill}
    strokeLinecap="round"
    strokeLinejoin="round"
  />
</Svg>

this works fine on iOS but on android it gives error:

java.lang.String cannot be cast to com.facebook.react.bridge.ReadableMap

Though I think the problem can be in the way i am passing colors but i am not sure how to solve it.