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

[yhanssens]

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.

[nivethan-me]

i'm also getting same error for the TailwindProvider

[bereket42]

Me too

[Jackmekiss]

Same

[fcastaneda9725]

Any update on this?

[frannale]

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

[brianarpie-forme]

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

[frannale]

The unique solution is add the fix to master branch. The node_modules is genertaed by that.

[neo773]

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

[dan-online]

If anyone else is experiencing this, feel free to use my fork

[vadimdemedes]

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

[marcelo-earth]

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

I still have the same error with React 18.

  "dependencies": {
    "expo": "~46.0.8",
    "expo-status-bar": "~1.4.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.4",
    "react-native-web": "~0.18.7",
    "tailwind-rn": "^4.2.0",
    "@expo/webpack-config": "^0.17.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.14",
    "@types/react-native": "~0.69.1",
    "concurrently": "^7.3.0",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "typescript": "~4.3.5"
  },

[ryantbrown]

What's going on here?

[marcelo-earth]

What's going on here?

I'm not sure

[dan-online]

See #158

[Gregoirevda]

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", ...],

[groom7]

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)

[rolandin]

@groom7 typing the hook in a generic mode will help you at least get rid of the type issue until this gets fixed:

// app.env.d.ts

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

 export function useTailwind(): (classes: string) => any; // Generic type for useTailwind

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

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

Although I keep getting error with the classes, Im just gonna try an old version of the package