Skip to content

Commit

Permalink
Update shim for RN 0.73+
Browse files Browse the repository at this point in the history
RN improved the typing of StyleSheet in 0.73 (facebook/react-native@b0a9053) by removing the possibility of typos/invalid keys. It looks like dark never really accounted for that, so using dark on 0.73 causes TS squigglies due to the fact that `dark` is not a valid propery key for any styles! Somewhere along the way too, it did widen some types from being 'flex-start' to 'string' which also caused errors.

This simplifies (and hopefully doesn't break?) the shim, by mostly just lifting the new TS definition inside RN, and applying the `AddDark` type.

I tested this on `vnxl` after upgrading the example app to 0.73 and by patching packages.

Update shim.d.ts
  • Loading branch information
zibs committed Apr 11, 2024
1 parent 40cce58 commit 54a7556
Showing 1 changed file with 5 additions and 11 deletions.
16 changes: 5 additions & 11 deletions shim.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,20 @@ module "react-native" {
export * from "react-native";

export namespace StyleSheet {
type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;

type AddDark<T> = T & { $dark?: T };

type DarkStyles<T> = {
type NamedStylesWithDark<T> = {
[P in keyof T]:
| AddDark<ViewStyle>
| AddDark<TextStyle>
| AddDark<ImageStyle>;
};


/**
* Create a stylesheet with dark-mode support via $dark property on style objects.
*/
export function create<T extends DarkStyles<T> | DarkStyles<any>>(
styles: T | DarkStyles<T>,
): {
[Key in keyof T]: T[Key] extends infer Base & { $dark: infer Dark }
? Expand<Omit<Base, keyof Base & "$dark"> & Partial<Dark>>
: T[Key];
};
export function create<T extends NamedStylesWithDark<T> | NamedStylesWithDark<any>>(
styles: T & NamedStylesWithDark<any>,
): T;
}
}

0 comments on commit 54a7556

Please sign in to comment.