[$250 bounty] Types breaking with TS 5.1+ ✅

[nandorojo]

Sigh, have to find out why 5.1 isn't working. 5.0.4 works fine for me

[nandorojo]

Looks like 5.2 breaks as well.

[nandorojo]

I will pay $200 for anyone to fix this.

[403access]

@nandorojo Could you please elaborate what error messages you had and how you managed to encounter them?

That's the only issue I could spot even without upgrading.

To be honest I tried updating TS and couldn't reproduce any issue.

One of the reasons could be that it was impossible to run the example apps as the Expo SDK version (v40) was too low and not supported.

If you want I can migrate all packages to the most recent versions - not just TS. For example, expo-yarn-workspaces is not supported either.

Related issues, pull requests and other sources:

• https://github.com/expo/expo/issues/19591
• https://github.com/expo/expo/pull/20170
• https://stackoverflow.com/a/68245906

[TamasSzigeti]

@403access Just run yarn tsc in the project root, it fails at multiple places. I believe the error is with onlyAllowThemeValues: "always"

[nandorojo]

Hey thanks for investigating this!

Let me post a better update of the issue I'm facing.

The problem isn't in the Dripsy repo.

Rather, if I use Dripsy in a separate repo that upgrades to 5.2, then I don't get TS declaration merging working properly.

I haven't even tried to reproduce this outside of the BeatGig repo, but I'll do this for you shortly.

[403access]

Szia* Tamás (@TamasSzigeti),

thanks for exposing that command.

I would expect such a command to be located in the (root level) package.json.

Your advice is guiding me in the right direction, thank you 🙏 Funnily, I came naturally across the same errors when trying to upgrade the Expo SDK.

I still didn't understand how everything can be bundled without having expo-linear-gradient listed in the corresponding package.json and instead only in the yarn.lock file although it's used in packages/dripsy/src/gradient/index.tsx.

From my perspective it is not only updating TS that needs to be tackled.

---

Fernando said that v5.0.4 works for him. For me it doesn't. Terminal:

yarn tsc
yarn run v1.22.21
$ /Users/olivermolnar/Desktop/420cloud/dripsy/node_modules/.bin/tsc
examples/example/App.tsx:277:15 - error TS2322: Type 'number' is not assignable to type 'FactoryValue<ResponsiveValue<un
defined>>'.                                                                                                             
277               flex: 1,
                  ~~~~

examples/example/App.tsx:293:13 - error TS2322: Type 'string' is not assignable to type 'undefined'.

293             gradient="strong"
                ~~~~~~~~

  packages/dripsy/build/gradient/index.d.ts:8:5
    8     gradient?: undefined;
          ~~~~~~~~
    The expected type comes from property 'gradient' which is declared here on type 'IntrinsicAttributes & Omit<PropsWit
hChildren<Omit<{ colors: string[]; locations?: number[]; start?: LinearGradientPoint; end?: LinearGradientPoint; } & ViewProps, "colors"> & { ...; }>, "variant" | "variants"> & StyledProps<...> & RefAttributes<...>'                         
examples/example/App.tsx:294:13 - error TS2322: Type 'string' is not assignable to type 'never'.

294             variant="layout.wide"
                ~~~~~~~

  packages/dripsy/build/core/types-v2/sx.d.ts:58:5
    58     variant?: VariantProp<ThemeKey>;
           ~~~~~~~
    The expected type comes from property 'variant' which is declared here on type 'IntrinsicAttributes & Omit<PropsWith
Children<Omit<{ colors: string[]; locations?: number[]; start?: LinearGradientPoint; end?: LinearGradientPoint; } & ViewProps, "colors"> & { ...; }>, "variant" | "variants"> & StyledProps<...> & RefAttributes<...>'                          
examples/example/App.tsx:309:19 - error TS2322: Type 'number' is not assignable to type 'FactoryValue<ResponsiveValue<un
defined>>'.                                                                                                             
309                   flex: 1,
                      ~~~~

examples/example/hook.tsx:7:25 - error TS2339: Property 'coolzie' does not exist on type '{ primary: "orange"; secondary
: "black"; background: "white"; callout: "pink"; accent: "green"; muted: "gray"; warning: "yellow"; error: "red"; gray: "#888"; nested: { one: ""; }; }'.                                                                                       
7     color: theme.colors.coolzie,
                          ~~~~~~~

examples/example/view.tsx:8:9 - error TS2322: Type '"#333"' is not assignable to type 'FactoryValue<ResponsiveValue<DotP
athOrKeyOf<{ primary: "orange"; secondary: "black"; background: "white"; callout: "pink"; accent: "green"; muted: "gray"; warning: "yellow"; error: "red"; gray: "#888"; nested: { one: ""; }; }>>>'.                                           
8         backgroundColor: '#333',
          ~~~~~~~~~~~~~~~

examples/example/view.tsx:14:9 - error TS2322: Type 'number' is not assignable to type 'FactoryValue<ResponsiveValue<Dot
PathOrKeyOf<{ $none: 0; $0: 0; $1: 4; $2: 8; $3: 16; $4: 32; $5: 64; $6: 128; $7: 256; $8: 512; }>>>'.                  
14         marginTop: 10,
           ~~~~~~~~~

packages/dripsy/src/core/components/Container.ts:8:5 - error TS2322: Type '"auto"' is not assignable to type 'FactoryVal
ue<ResponsiveValue<DotPathOrKeyOf<{ $none: 0; $0: 0; $1: 4; $2: 8; $3: 16; $4: 32; $5: 64; $6: 128; $7: 256; $8: 512; }>>>'.                                                                                                                    
8     mx: 'auto',
      ~~

packages/dripsy/src/core/components/Flex.ts:6:5 - error TS2322: Type 'string' is not assignable to type 'FactoryValue<Re
sponsiveValue<undefined>>'.                                                                                             
6     flexDirection: 'row',
      ~~~~~~~~~~~~~

packages/dripsy/src/core/components/pressable.tsx:13:3 - error TS2345: Argument of type '({ showCursor }: { showCursor: 
boolean; }) => { cursor: string; }' is not assignable to parameter of type 'Sx | ((props: { showCursor: boolean; }) => Sx)'.                                                                                                                      Type '({ showCursor }: { showCursor: boolean; }) => { cursor: string; }' is not assignable to type '(props: { showCurs
or: boolean; }) => Sx'.                                                                                                     Type '{ cursor: string; }' is not assignable to type 'Sx'.
      Type '{ cursor: string; }' is not assignable to type '{ zIndex?: FactoryValue<ResponsiveValue<number | (string & {
})>>; display?: FactoryValue<ResponsiveValue<undefined>>; ... 730 more ...; tintColor?: FactoryValue<...>; }'.                  Types of property 'cursor' are incompatible.
          Type 'string' is not assignable to type 'FactoryValue<ResponsiveValue<undefined>>'.

 13   ({ showCursor }: { showCursor: boolean }) => ({
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 14     ...Platform.select({
    ~~~~~~~~~~~~~~~~~~~~~~~~
... 
 18     }),
    ~~~~~~~
 19   })
    ~~~~

packages/dripsy/src/core/types-v2/sx.ts:87:3 - error TS2339: Property 'reactNativeTypesOnly' does not exist on type '{ o
nlyAllowThemeValues: { colors: "always"; space: "always"; }; }'.                                                        
87 >['reactNativeTypesOnly'] extends true
     ~~~~~~~~~~~~~~~~~~~~~~

packages/dripsy/src/core/types-v2/sx.ts:199:3 - error TS2322: Type '"$text"' is not assignable to type 'FactoryValue<Res
ponsiveValue<DotPathOrKeyOf<{ primary: "orange"; secondary: "black"; background: "white"; callout: "pink"; accent: "green"; muted: "gray"; warning: "yellow"; error: "red"; gray: "#888"; nested: { one: ""; }; }>>>'.                          
199   bg: '$text',
      ~~

packages/dripsy/src/core/types-v2/sx.ts:203:3 - error TS2322: Type '"$text"' is not assignable to type 'FactoryValue<Res
ponsiveValue<DotPathOrKeyOf<{ primary: "orange"; secondary: "black"; background: "white"; callout: "pink"; accent: "green"; muted: "gray"; warning: "yellow"; error: "red"; gray: "#888"; nested: { one: ""; }; }>>>'.                          
203   shadowColor: '$text',
      ~~~~~~~~~~~

packages/dripsy/src/core/types-v2/sx.ts:204:3 - error TS2322: Type '"$nested.100"' is not assignable to type 'FactoryVal
ue<ResponsiveValue<DotPathOrKeyOf<{ primary: "orange"; secondary: "black"; background: "white"; callout: "pink"; accent: "green"; muted: "gray"; warning: "yellow"; error: "red"; gray: "#888"; nested: { one: ""; }; }>>>'.                    
204   textShadowColor: '$nested.100',
      ~~~~~~~~~~~~~~~

packages/dripsy/src/core/types-v2/sx.ts:205:3 - error TS2322: Type 'string' is not assignable to type 'FactoryValue<Resp
onsiveValue<undefined>>'.                                                                                               
205   alignItems: 'center',
      ~~~~~~~~~~

packages/dripsy/src/core/types-v2/sx.ts:206:20 - error TS2322: Type 'string' is not assignable to type 'undefined'.

206   justifyContent: ['center', 'flex-end'],
                       ~~~~~~~~

packages/dripsy/src/core/types-v2/sx.ts:206:30 - error TS2322: Type 'string' is not assignable to type 'undefined'.

206   justifyContent: ['center', 'flex-end'],
                                 ~~~~~~~~~~

packages/dripsy/src/core/types-v2/sx.ts:207:3 - error TS2322: Type 'number' is not assignable to type 'FactoryValue<Resp
onsiveValue<DotPathOrKeyOf<{ $none: 0; $0: 0; $1: 4; $2: 8; $3: 16; $4: 32; $5: 64; $6: 128; $7: 256; $8: 512; }>>>'.   
207   paddingLeft: 20,
      ~~~~~~~~~~~

packages/dripsy/src/core/types-v2/sx.ts:208:3 - error TS2322: Type '"$text"' is not assignable to type 'FactoryValue<Res
ponsiveValue<DotPathOrKeyOf<{ primary: "orange"; secondary: "black"; background: "white"; callout: "pink"; accent: "green"; muted: "gray"; warning: "yellow"; error: "red"; gray: "#888"; nested: { one: ""; }; }>>>'.                          
208   borderColor: '$text',
      ~~~~~~~~~~~

packages/dripsy/src/core/types-v2/sx.ts:209:3 - error TS2322: Type 'number' is not assignable to type 'FactoryValue<Resp
onsiveValue<undefined>>'.                                                                                               
209   flex: 1,
      ~~~~

packages/dripsy/src/core/types-v2/sx.ts:210:3 - error TS2322: Type '"$nested.100"' is not assignable to type 'FactoryVal
ue<ResponsiveValue<DotPathOrKeyOf<{ primary: "orange"; secondary: "black"; background: "white"; callout: "pink"; accent: "green"; muted: "gray"; warning: "yellow"; error: "red"; gray: "#888"; nested: { one: ""; }; }>>>'.                    
210   color: '$nested.100',
      ~~~~~

Found 21 errors in 7 files.

Errors  Files
     4  examples/example/App.tsx:277
     1  examples/example/hook.tsx:7
     2  examples/example/view.tsx:8
     1  packages/dripsy/src/core/components/Container.ts:8
     1  packages/dripsy/src/core/components/Flex.ts:6
     1  packages/dripsy/src/core/components/pressable.tsx:13
    11  packages/dripsy/src/core/types-v2/sx.ts:87
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

---

*szia = hello in Hungarian language for everybody wondering ;)

[403access]

Hey thanks for investigating this!

Let me post a better update of the issue I'm facing.

The problem isn't in the Dripsy repo.

Rather, if I use Dripsy in a separate repo that upgrades to 5.2, then I don't get TS declaration merging working properly.

I haven't even tried to reproduce this outside of the BeatGig repo, but I'll do this for you shortly.

Okay, thanks.

Maybe it's a topic for another issue: Do you plan to upgrade the dependencies Dripsy uses, e.g. Expo SDK etc.? And can you please create a small ReadMe on how to build locally & contribute?

Thanks!

[nandorojo]

Yeah! The example app itself is pretty outdated, I haven’t really used it for testing features in a long time, only testing types. Since we’re feature stable for now the only thing to test there I think would be TS.

Ideally the repo would upgrade to 5.2 as well, but I would say this is a secondary concern to me at the moment. The biggest thing I want to fix is letting an app on TS 5.2 use dripsy.

The best way to investigate this might be to create a new app, install Dripsy, set it up, upgrade to TS 5.2, and see if it works. And if it doesn’t, perhaps editing Dripsy types in node_modules to see why it isn’t working properly. It might even be a one line change.

[403access]

@nandorojo The following repository contains dedicated branches for the versions

• 5.0.2,
• 5.0.4,
• 5.3.3 (latest version right now): https://github.com/403access/dripsy-typescript-issue

Couldn't reproduce. The repository is a pure Expo project. Should I have created one with Solito?

Maybe it would be better waiting for your input. Invested quite some time already. And somehow it feels like it's not the right approach.

Thanks!

[nandorojo]

Interesting, let me reproduce better on my end and get back to you.

[nandorojo]

@403access your repro appears to be missing the TypeScript setup which requires using declaration merging:

const theme = makeTheme({
  // your theme
})
type MyTheme = typeof theme
declare module 'dripsy' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DripsyCustomTheme extends MyTheme {}
}

The result of useDripsyTheme, if everything is working properly, should return your exact theme

[nandorojo]

To say again what the issue is:

1. Create a new Expo TS app
2. Install Dripsy
3. Use the latest version of TS
4. Follow dripsy TypeScript setup with custom theme

Do you get autocomplete for theme values in the sx prop like colors? If not, and you fix it, you will get the bounty.

Raised to $250.

[nandorojo]

The repro: adding types to the theme seems to break autocomplete.

[Elie-A-98]

Created a PR with the fix: https://github.com/nandorojo/dripsy/pull/304

[nandorojo]

Bounty claimed by @Elie-A-98

[nandorojo]

Thank you all for your help!