marklawlor / nativewind

React Native utility-first universal design system - powered by Tailwind CSS
https://nativewind.dev
MIT License
4.3k stars 233 forks source link

Shadow prop error in android #893

Open benomzn opened 3 weeks ago

benomzn commented 3 weeks ago

Hi, I made a custom component, that receives the "className?: string" prop. This is the component:

import { cn } from "@/core/utils";
import { ActivityIndicator, Pressable, PressableProps } from "react-native";

interface ButtonPros {
  onPress: () => void,
  className?: string,
  children?: React.ReactNode,
  isLoading?: boolean
}

const Button = ({ onPress, className, children, isLoading = false, ...rest }: ButtonPros & PressableProps): JSX.Element => {
  return (
    <>
      <Pressable
        onPress={onPress}
        disabled={isLoading}
        className={cn("outline-none items-center justify-center shadow shadow-black rounded-full bg-slate-600 px-5 py-2 active:scale-95 active:opacity-80 transition-all", className)}
        {...rest}>
        {isLoading ? <ActivityIndicator size={15}/> : children}
      </Pressable>
    </>
  );
}
export default Button;

But in Android, I receive this error:

image

This only happens in the android emulator, it works fine on iOS. When I deleted "shadow shadow-black" from className prop in Pressable component, I stopped getting errors. Even if I get the warning, the shadow still works on ios and android, but I'm curious why I'm getting this message in the console.

Versions: "expo": "~50.0.14", "nativewind": "^4.0.1", "tailwindcss": "^3.4.3"