tailwind-rn: Typescript error: Property 'children' does not exist on type 'IntrinsicAttributes & Props' (TailwindProvider)

I’m getting this error on a typescript project I’m currently working on but also occurs when initing a new typescript project.

I think this could be fixed by adding children?: React.ReactNode | React.ReactNode[] to the interface Props but I’m not entirely sure.

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 10
  • Comments: 17 (1 by maintainers)

Most upvoted comments

You can edit your TailwindProvider interface definition props in node_modules/tailwind-rn/dist/tailwind-provider.d.ts like:

interface Props { children: React.ReactNode; utilities: Utilities; colorScheme?: ColorSchemeName; }

Can i do a pull request with this, but i need confirmation of some collaborator for the scope of the change

Temporary workaround is to use patch-package module

npm i patch-package  --save-dev

Edit package.json and add this in scripts

"postinstall": "npx patch-package"

Edit TailwindProvider interface definition props in node_modules/tailwind-rn/dist/tailwind-provider.d.ts (Credit to frannale)

interface Props {
    utilities: Utilities;
    colorScheme?: ColorSchemeName;
    children?: React.ReactNode | React.ReactNode[]
}

Run

npx patch-package tailwind-rn

Done! the package will be auto patched whenever you reinstall the dependencies

I need to update tailwind-rn to support React 18 and new types from @types/react to make this error go away.

Hey, any idea how can we can override this error without modifying node_modules?

Without a patch, but overriding type definition

// app-env.d.ts

declare module 'tailwind-rn' {
  export * from 'tailwind-rn';

  interface Props {
    utilities: Utilities;
    colorScheme?: ColorSchemeName;
    children?: React.ReactNode | React.ReactNode[]
  }

  export const TailwindProvider: React.FC<Props>;
}

// tsconfig.json

  "include": ["app-env.d.ts", ...],

It helped me, but now I have a new error when importing useTilewind, do you know how to fix it? import { useTailwind, TailwindProvider } from 'tailwind-rn';

Module ‘“tailwind-rn”’ has no exported member ‘useTailwind’.ts(2305)