The linear gradient component crashes the app on expo SDK 45.

[WillenOLeal]

Steps to Reproduce:

1. Create an expo managed app with expo init (SDK 45);
2. Install dripsy and @dripsy/gradient(3.6.0);
3. Use the gradient component anywhere on the app.

Sample App.tsx

import { Gradient } from "@dripsy/gradient";
import { DripsyProvider, makeTheme } from "dripsy";
import { StatusBar } from "expo-status-bar";
import { Text } from "react-native";

const theme = makeTheme({...});

export default function App() {
  return (
    <DripsyProvider theme={theme}>
      <Gradient
        colors={["green", "blue"]}
        sx={{ flex: 1, alignItems: "center", justifyContent: "center" }}
      >
        <Text>Open up App.tsx to start working on your app!</Text>
        <StatusBar style="auto" />
      </Gradient>
    </DripsyProvider>
  );
}

Expected Result

The app runs crash free

Actual Result

[nandorojo]

did you install expo-linear-gradient

[WillenOLeal]

@nandorojo yep! I have "expo-linear-gradient": "~11.3.0", installed. I also ran expo start -c after it, but no luck.

[nandorojo]

does expo's normal gradient work for you?

[WillenOLeal]

Yes, the expo-linear-gradient works fine (code below). I noticed I am using expo-linear-gradient version 11., however I think that the @dripsy/gradient package is using version 10, could that be the reason?

import { Gradient } from "@dripsy/gradient";
import { DripsyProvider, makeTheme } from "dripsy";
import { LinearGradient } from "expo-linear-gradient";
import { StatusBar } from "expo-status-bar";
import { Text } from "react-native";

const theme = makeTheme({...});

export default function App() {
  return (
    <DripsyProvider theme={theme}>
      <LinearGradient
        colors={["green", "blue"]}
        style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
      >
        <Text>Open up App.tsx to start working on your app!</Text>
        <StatusBar style="auto" />
      </LinearGradient>
    </DripsyProvider>
  );
}

[nandorojo]

oh yeah that’s probably it. try a yarn resolution for now

[WillenOLeal]

Thank you, that did the trick!

Package.json

  "resolutions": {
    "@dripsy/gradient/**/expo-linear-gradient": "~11.3.0",
  },

[nandorojo]

I think just expo-linear-gradient should suffice, but that works too. I’ll make this a peer dep in a future release. Glad that worked!

[luizkc]

Even with the change mentioned above, I still can't get the gradient to show on iOS. I installed @dripsy/gradient on the packages/app directory. It works on web, but not on iOS, any clues?

[nandorojo]

did you use the resolution above? i haven’t had time to focus on fixing this internally

[luizkc]

Yep, I did use the resolutions above.

[nandorojo]

are you using yarn?

[luizkc]

Yep. I'm using the Solito Starter Repo with Yarn. This is the package.json inside my packages/app directory:

{
  "version": "0.0.0",
  "name": "app",
  "main": "index.ts",
  "dependencies": {
    "@dripsy/gradient": "^3.6.0",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.0",
    "dripsy": "^3.6.0",
    "expo-linking": "^3.0.0",
    "firebase": "^9.8.3",
    "moti": "canary",
    "solito": "latest"
  },
  "resolutions": {
    "@dripsy/gradient/**/expo-linear-gradient": "~11.3.0"
  },
  "sideEffects": false
}

[nandorojo]

can you put the resolution in the root of the repo and then run yarn from the root?

[luizkc]

Tried moving the resolution to the root package.json and the gradient still won't render on iOS.

[nandorojo]

try yarn why expo-linear-gradient. does it work if you import direct from expo?

[nandorojo]

also try removing everything before expo in the resolution

[luizkc]

I removed everything before expo in the resolution. yarn why expo-linear-gradient ran successfully from the root dir. However, now the app won't build anymore. These are some of the errors it throws. Any other suggestions?

[nandorojo]

what was the result of yarn why?

[nandorojo]

i see, if you’re using a custom dev client, the issue is that expo isn’t autolinking to the right place. so you should also expo install expo-linear-gradient in apps/expo. then take the version it installed and use that in your root resolution.

the solito starter also isn’t on SDK 45 (yet), so you need your yarn resolution to match the sdk version you’re on. deoendencies are always the issue…lol

[luizkc]

Yarn why results:

So if I install it in the expo directory, should I also leave it installed in the packages/app directory for next.js to be able to use it as well?

[nandorojo]

that’s correct. and you need the versions to match, but a yarn resolution solves that.

[luizkc]

I did the below and I'm still not seeing the gradient. Let me know if I did anything wrong or if there's anything else I can try. Thank you for being so helpful!

• expo-linear-gradient with version 11.0.3 is installed in packages/app and apps/expo
• a resolution like the below, targeting expo-linear-gradient with the same version is in the package.json in the root. I tried both ways:

// suggestion 1: app builds but no gradient
  "resolutions": {
    "@dripsy/gradient/**/expo-linear-gradient": "~11.3.0"
  },

// suggestion 2: app doesn't build, see the last error message I posted
  "resolutions": {
    "expo-linear-gradient": "~11.3.0"
  },

The first time I run the app using suggestion 1 (on iOS) I see the gradient flash very quickly, less than a second, then it goes away 🤔

[luizkc]

So this is the solution I've gone with for now:

• Created a Gradient component
• Gradient/index.web.tsx uses @dripsy/gradient
• Gradient/index.tsx uses expo-linear-gradient
• I can't use my <Gradient /> component anywhere in the packages/app/provider directory
• I can use my <Gradient /> component in almost any other directory and it will render fine on iOS and the web

[nandorojo]

Can you try upgrading to 3.7.x for both dripsy and the gradient?