hoanglam10499 / react-native-drop-shadow

https://www.npmjs.com/package/react-native-drop-shadow
MIT License
218 stars 9 forks source link

JSX element class does not support attributes because it does not have a 'props' property. #19

Open jo-dadic opened 1 year ago

jo-dadic commented 1 year ago

I keep getting this error while trying to style DropShadow component: JSX element class does not support attributes because it does not have a 'props' property.

I tried with the newest version and also with 0.0.4 and with the same code as in documentation example:

<DropShadow
      style={{
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowOpacity: 1,
        shadowRadius: 5,
      }}
    >

Trying to wrap up the View component. I am using React 18.2.0 and React Native 0.71.2.

eugene1beetle0geniusee commented 1 year ago

It's typescript only-issue, in RN 0.71 there is no type Constructor that used in <project-root>/node_modules/react-native-drop-shadow/index.d.ts

Main functionality working perfect

To temporary solve this issue replace content of your <project-root>/node_modules/react-native-drop-shadow/index.d.ts with:

import React from "react";
import * as RN from "react-native";

export interface PropsView extends RN.ViewProps {}
declare class DropShadowComponent extends React.Component<PropsView> {}
declare const DropShadowBase: RN.NativeMethods &
  typeof DropShadowComponent;

export default class DropShadow extends DropShadowBase {}

You can also use patch-package to store changer made in node_modules

markjsc commented 1 year ago

It's typescript only-issue, in RN 0.71 there is no type Constructor that used in <project-root>/node_modules/react-native-drop-shadow/index.d.ts

Main functionality working perfect

To temporary solve this issue replace content of your <project-root>/node_modules/react-native-drop-shadow/index.d.ts with:

import React from "react";
import * as RN from "react-native";

export interface PropsView extends RN.ViewProps {}
declare class DropShadowComponent extends React.Component<PropsView> {}
declare const DropShadowBase: RN.NativeMethods &
  typeof DropShadowComponent;

export default class DropShadow extends DropShadowBase {}

You can also use patch-package to store changer made in node_modules

Thanks so much for sharing this workaround! This also worked for me on a project with React 18.2.0 and React Native 0.71.4.

@hoanglam10499 - Is there any chance the source can be updated with this fix? (Forgive me - I'm not sure if this will break things for older versions of React Native.)

markjsc commented 1 year ago

It's been a while since I've checked for updates. It appears that this issue is resolved in v0.0.7.

Thanks so much to the contributors (@hoanglam10499) for their hard work!!