Use react-native-unistyles

[vanenshi]

In the past few years as a React Native developer, I’ve used various css libraries in the ecosystem. None of them have reached the level of web libraries like Chakra UI or MUI, so I’ve been mostly relying on my own theme system, which is quite similar to your current version. However, I believe react-native-unistyles can address a part of this issue. It integrates a variant system and is incredibly fast.

I’d love to hear your thoughts on this library.

[frankcalise]

hey @vanenshi, thanks for your interest in Ignite! I moved this over to the discussion board as it seems more appropriate. In terms of using unitstyles in Ignite by default, that would depend on our team and if enough of us use it on our client projects (where right now we don't, so we won't make that change).

We do like the library though, it's definitely one that feels similar to our own theme system (ands yours it seems like) and is a great step up with some other features. I believe @mazenchami has used it on his client project and is enjoying the experience!

[vanenshi]

Hi @frankcalise,

Thanks for considering my recommendation. Personally, I’ve been on the lookout for a robust design system similar to Chakra UI. I’ve tried some of the active options in the ecosystem (like Tamagui), but none of them fully met my needs. At one point, I even built a custom system called Recipes, inspired by PandaCSS. However, it turned out to be too complex for my team to adopt effectively.

This is why I lean towards using third-party libraries like react-native-unistyles. These libraries are maintained by a community, often come with good documentation, and provide ready-to-use examples, which can significantly reduce the onboarding curve for teams.

[craigjones-dev]

There is a recipe in the Ignite cookbook!

https://infinitered.github.io/docs/recipes/Theming-Unistyles

[vanenshi]

i get 404 from this link 💀, but i found the source

[frankcalise]

https://ignitecookbook.com/docs/recipes/Theming-Unistyles

[safinghoghabori]

@vanenshi i have two queries here:

1. unlike chakra ui or mui, react-native-unistyles is not a component library, so ultimately you will have to build your own design system. So how does it help you in your case?
2. Also, Ignite has already added superpower to StyleSheet.create api, which does almost the same thing that react-native-unistyles does. So cant we use the same solution without adding extra library?

Please let me know if I'm getting something wrong here.

[vanenshi]

Hey @safinghoghabori,

1. Unfortunately, I couldn’t find a suitable replacement for chkara or mui in the React Native environment. So, I reduced my expectations and decided to build my own design system. When I did that, I needed semantic tokens to build themes, and I found Unistyle. It had a very clean API and was easy to build the design system on top of it.

2. I guess it wasn’t available at that time, or I didn’t notice it. I haven’t used Ignite recently because I moved to NativeWind for some reasons, but I’m not satisfied with it.

[safinghoghabori]

Got you. Actually, there are too many options out there, and it can be confusing. For ex, NativeWind & Uniwind. Uniwind claims that 2-3x faster than NativeWind but if you see NativeWind seems more popular and has more stars on Github!

[safinghoghabori]

@vanenshi i just came across react-native-reusables, gluestack.io, rn-primitives and my mind is blown. Have you had a chance to try them?

[vanenshi]

Yeah, my current go-to plan is react-native-reusables and nativewind v4. They attempt to emulate the shadcn and taliwind stack. However, nativewind isn’t very active at the moment, and I prefer to experiment with Uniwind.

Additionally, gluestack v3 looks very intriguing, and I’m considering replacing it with reusables for my next project.

Using all these tools, you can create a solid architecture based on Ignite’s base template. All you need to do is modify their design system. If you decide to use Uniwind or nativewind directly, ensure you use the tailwind merge to gain the ability to override styles.

[safinghoghabori]

Sure. By the way, how do you decide which one to pick? Are there any guidelines or parameters you follow? (I generally look at GitHub stars and npm downloads)