Skip to content

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

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 {
  ...
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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