Skip to content

React 19 TypeScript: Shadow component type incompatible with new JSX types #90

@litinskii

Description

@litinskii

Hi 👋,

After upgrading to React 19 and TypeScript, using the Shadow component from react-native-shadow-2 causes the following type error:

'Shadow' cannot be used as a JSX component.
Its type '(props: ShadowProps) => JSX.Element' is not a valid JSX element type.
  Type '(props: ShadowProps) => JSX.Element' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.

Explanation:

In React 19, TypeScript's JSX types have changed. Now, function components must return ReactNode | Promise. Returning JSX.Element (as Shadow currently does) is no longer compatible.

Steps to reproduce:

Upgrade a React Native project to React 19.

Use Shadow in a component.

Compile with TypeScript — the error appears.

Suggested fix:

Change the return type of Shadow and ShadowInner from JSX.Element to React.ReactNode:

export function Shadow(props: ShadowProps): React.ReactNode {
  return props.disabled ? <DisabledShadow {...props} /> : <ShadowInner {...props} />;
}

function ShadowInner(props: ShadowProps): React.ReactNode {
  ...
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions