Improve support for React v18

Open
#144 3 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, react
Domain
frontend

Research direction

Start by locating the package typings at typings/index.d.ts, using the supplied patch as the expected change. Verify the React v18 type requirement and confirm that the published package typings allow ThemeProvider children without breaking existing type usage.

Written by the indexing model from the issue text.

Description

Hi! 👋

Firstly, thanks for your work on this project! 🙂

With React v18 children is expected to be explicitly typed

I've used patch-package to patch @callstack/react-theme-provider@3.0.8

Here is the diff that solved my problem:

diff --git a/node_modules/@callstack/react-theme-provider/typings/index.d.ts b/node_modules/@callstack/react-theme-provider/typings/index.d.ts
index fd76d0e..df3cf54 100644
--- a/node_modules/@callstack/react-theme-provider/typings/index.d.ts
+++ b/node_modules/@callstack/react-theme-provider/typings/index.d.ts
@@ -8,7 +8,7 @@ type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T,
 type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
 
 export type ThemingType<Theme> = {
-  ThemeProvider: React.ComponentType<{ theme?: Theme }>;
+  ThemeProvider: React.ComponentType<{ theme?: Theme; children: React.ReactNode }>;
   withTheme: <Props extends { theme: Theme }, C>(
     WrappedComponent: React.ComponentType<Props> & C
   ) => React.ComponentType<
Dominant language
JavaScript
Stars
466
Forks
53
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from callstack/react-theme-provider

All issues in callstack/react-theme-provider

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.