Snack Web Gradients

[jmw4522]

Hi everyone,

I’m teaching a class on building simple mobile apps to high school seniors. Expo snacks have been a life saver and the students seem to be enjoying seeing their creations on their phones without having to publish to the stores.

I searched in every possible way to find an answer, but I can’t find one. I’m trying to use expo linear gradients. It works on sdk version 33 and 34 but on 35 the web preview is wrong (for example, red instead of blue). Viewing the snack on the Expo app displays the gradient correctly.

Here’s my snack:https://snack.expo.io/@jmw4522/3b936d

I’ve looked through github and saw that this should be fixed in v 7.0.1 of the gradient module: https://github.com/expo/expo/issues/5771. Is there a way to force or make sure that snack are running the latest version of a module? I tried to add expo-linear-gradient as a dependency on packages.json, but I got errors.

Thanks for the help!

[wodin]

Hi

I think this has been resolved. Currently if I add the following to a new snack:

import { LinerGradient } from 'expo-linear-gradient';

and accept the prompt to add it to package.json, the following is added:

    "expo-linear-gradient": "7.0.1"

[jmw4522]

I’ve done that already and I’m still getting a red gradient instead of the Facebook blue:

https://snack.expo.io/@jmw4522/3b936d

Again, it runs fine on the Android app.

[wodin]

I see.

If I run expo init locally, expo install expo-linear-gradient, paste your code into App.js and then expo start -w it works for me.
If I export the snack and run it locally it works for me.
Also, in snack, if I switch to SDK version 33 or 34 it works for me.

So there’s something weird going on on snack.expo.io. It might be something with the version of react-native-web which expo-linear-gradient depends on rather than expo-linear-gradient.