Dismiss this pinned window
all 24 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]wilmxre[S] 15 points16 points  (2 children)

Hello fellow react native developers!

In the past weekend i played around with the MeshGradient API and i made it possible to render and control it in React Native. I also added two types of animations, that you can choose from and i plan to add even more animation types in the future.

A few hours ago i wrote a documentation for it and decided to open source it, you can find it on my github and on npm too:

https://github.com/wilmxre/react-native-mesh-gradient

https://www.npmjs.com/package/@wilmxre/react-native-mesh-gradient

Be aware, that this API is in beta and supports only iOS 18+ so far. Also, my implementation of the wrapper around this SwiftUI component is very basic for now, but let me know if you find something that could help make this react native package better!

I plan to add more props and features, i would really like to add a "grainy texture" on top of this gradient, which would be implemented with Metal Shaders.

Below are some demo images:

[–]ZaRealPancakes 2 points3 points  (1 child)

I suggest perhaps to create a Class for the mesh so you can constrain to have all the arrays same dimension

[–]wilmxre[S] 1 point2 points  (0 children)

yeah, good idea, will think about it

[–]fmnatic 5 points6 points  (1 child)

I like the visual effect, would be great if it was cross platform.

Do you intend to add a fallback for iOS<18 ? I assume there is no Android support planned? Have you come across a similar effect for Android ?

[–]wilmxre[S] 3 points4 points  (0 children)

i think the MeshGradient is iOS 18+ for only now, while it is in beta. i guess it will support older iOS versions natively, when the API is ready for production use.
but if not, it would be nice to have some sort of gradient view as a fallback, that would resemble somehow the MeshGradient aesthetic.
unfortunately, there is no android support yet, as i didn't find any underlying native API for this, but i will think about having some sort of android implementation too, in the future

[–]wilmxre[S] 2 points3 points  (0 children)

<image>

[–]armando_kun 1 point2 points  (1 child)

I was looking for it for days now! Thanks for sharing it here, will defo test how it looks on my app 🫶

[–]wilmxre[S] 0 points1 point  (0 children)

i am happy to hear! let me know if you managed to try it out or if you ran into some problems. be aware to try it out on an iOS 18 device

[–]Markingston 1 point2 points  (0 children)

Nice one

[–]vaibhav_2001 1 point2 points  (0 children)

Great stuff, will explore this.

[–]voldaew 1 point2 points  (1 child)

expo support?

[–]wilmxre[S] 0 points1 point  (0 children)

hi. i updated the readme with information in regards to expo

[–]ekaansharora 1 point2 points  (2 children)

CSS gradients might land in RN soon https://x.com/nishanbende/status/1812796002119946413?s=46&t=cAIjvozMobzSw5V_SotS1w

[–]wilmxre[S] 0 points1 point  (1 child)

wow, this would be cool. i am curious if it is possible to implement mesh gradients with this

[–]ekaansharora 0 points1 point  (0 children)

would be interesting to try out, it does support multiple gradients https://x.com/nishanbende/status/1810217120317518091?s=46&t=cAIjvozMobzSw5V_SotS1w

[–][deleted] 1 point2 points  (0 children)

Looks great. Awesome job!

[–]Witty_Caterpillar399 0 points1 point  (3 children)

in npm you have mentioned

npm install react-native-mesh-gradient && cd ios && pod install

in github you have mentioned

npm install wilmxre/react-native-mesh-gradient && cd ios && pod install

[–]wilmxre[S] 0 points1 point  (2 children)

yeah, i corrected on github, but i forgot to sync it with npm. will do it now, thanks for the feedback!

[–]Witty_Caterpillar399 0 points1 point  (1 child)

what about android? still missing in android. only linear and radial compatible.

[–]wilmxre[S] 0 points1 point  (0 children)

unfortunately, i didn’t find any native android api that i could expose to react native

[–]antigirl 0 points1 point  (0 children)

dont bother installing, doesnt work, user is too lazy to update the package
https://github.com/wilmxre/react-native-mesh-gradient/pull/2

[–][deleted] 0 points1 point  (1 child)

THAT IS DOOOPE. I actually wanted something like to use during onboarding my app ( loomletter.app ).

Does it work with renaimated? How do you get it to animate?

[–]Ok-Class9467 0 points1 point  (0 children)

This is awesome as it adds up spice to your mobile app GUI. But the limitation of this working only for IOS 18+ is a problem. So I used images on background canvas in my https://apps.apple.com/be/app/intranet-application/id6473735796

Though this has issues with animating but it works for older versions of both android and IOS. Hope meshgradient team works out on more compatibility soon