LinearGradient `gradient` prop error with TypeScript

[dmahajan980]

I have defined a gradient inside theme.linearGradients and the Gradient component throws the following error whenever I try accessing the gradient name via gradient prop:

My theme.ts file:

const theme = makeTheme({
  // Custom properties
  borderRadii,
  shadowColors,
  shadowOffsets,

  // Properties suggested by docuementation.
  colors,
  linearGradients: {
    background: ['skyBlue', 'seaBlue'],
  },

  borderStyles,
  borderWidths,
  customFonts,
  fonts,
  fontSizes,
  letterSpacings,
  lineHeights,
  shadows,
  sizes,

  space: spacing,
  text: { ... },
  layout: { ... },
});

Package Versions:

• react-native: 0.64.3
• expo: 44.0.0
• dripsy: 3.6.0
• @dripsy/gradient: 3.6.0
• typescript: 4.3.5

[nandorojo]

you need to upgrade typescript

[dmahajan980]

@nandorojo I upgraded TypeScript to the latest version (v4.5.5), however, it throws the same error.

[nandorojo]

did you restart vscode

[dmahajan980]

@nandorojo yes, I did restart VSCode and TS server but the error didn't go away. Maybe I can try back once again and see if it's really an issue with my VSCode or TS Server.

[nandorojo]

can you try installing @canary for dripsy and the gradient

[nandorojo]

did you try that btw ^

[WillenOLeal]

Hi @nandorojo 👋 , I am also experiencing the same error mentioned above ☝️. I have the same config as above, except that I got:

• typescript: 4.6.4 (latest as of today)
• dripsy: 3.6.2-alpha.1
• @dripsy/gradient: 3.6.2-alpha.1

I tried following the steps above and also installing the @canary dependencies with yarn add dripsy@canary @dripsy/gradient@canary as you suggested, but I still get the same error :-(. Would you have any other ideas how I could get around this, without using any that is 😅 . Thank you!

[nandorojo]

can i see your theme declaration

[WillenOLeal]

Sure! This is my theme declaration @nandorojo:

import { makeTheme } from "dripsy";

const theme = makeTheme({
  colors: {
    primary: "blue",
    secondary: "black",
    background: "white",
    callout: "pink",
    accent: "green",
    muted: "gray",
    warning: "yellow",
    error: "red",
    gray: "#888",
  },
  types: {
    onlyAllowThemeValues: {
      colors: "always",
      space: "always",
    },
  },
  shadows: {
    md: {
      shadowOffset: {
        width: 0,
        height: 10,
      },
      shadowOpacity: 0.8,
      shadowRadius: 14,
      elevation: 25,
      shadowColor: "background",
    },
  },
  text: {
    primary: {
      fontSize: 40,
    },
    secondary: {
      fontSize: 60,
    },
  },
  sizes: {
    container: 700,
  },
  textShadows: {
    onImage: {
      textShadowOffset: { width: 1, height: 1 },
      textShadowRadius: 5,
      textShadowColor: "gray",
    },
  },
  layout: {
    wide: {},
    narrow: {},
  },
  space: {
    $0: 0,
    $1: 4,
    $2: 8,
    $3: 16,
    $4: 32,
    $5: 64,
    $6: 128,
    $7: 256,
    $8: 512,
  },
  fontWeights: {
    black: "500",
    bold: "600",
  },
  linearGradients: {
    light: ["white", "primary"],
  },
});

type MyTheme = typeof theme;

declare module "dripsy" {
  interface DripsyCustomTheme extends MyTheme {}
}

export { theme };

Thank you for the fast reply btw!

[midrizi]

Hi @nandorojo, having the same issue any fix for this?

const theme = makeTheme({
  linearGradients: {
    $primaryGradient: ['#000000', '#ffffff'],
  },
})

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

Getting the following error:

Edit:

I modified the following @dripsy/gradient/lib/typescript/index.d.ts

...
...
import { DripsyFinalTheme } from '@dripsy/core';
declare const Grad: React.ComponentType<import("@dripsy/core").StyledProps<keyof DripsyFinalTheme> & ((Omit<import("expo-linear-gradient").LinearGradientProps, "colors"> & {
    gradient?: keyof DripsyFinalTheme['linearGradients']; // <---- modified here
    colors?: (string & {})[] | undefined;
    stretch?: boolean | undefined;
} & React.RefAttributes<React.Component<Omit<import("expo-linear-gradient").LinearGradientProps, "colors"> & {
...
...

Not sure how the whole gradient thing is supposed to be converted from linearGradients, this works as a quick fix for me.