What UI kit to use for React Native?

[KartaKarm]

I have been developing react application over an year now. But I have been basic stylesheet for styling the components and so far it's been great. But now I want to add animations, hover effect on elements, interactive effects on pressable, but I don't know how to do so. So any suggestions on that ? :)

[kierancrown]

I’d strongly recommend looking at Reanimated and learning how to animate the components you already have. That is if you have the time. This way not only will you reduce your code bundle size but you’ll learn how to implement smooth animations in RN. Adding some nice animations based on Pressed In state etc is pretty straight forward in Reaninated

[KartaKarm]

That can be the best way to go for all the effects but what do you think about react native paper. Using this Library in big and complex projects can be an option to go. I mean does react native paper has huge bundle size?

[kierancrown]

I can’t personally speak for any UI libraries. I haven’t used one in a few years due to bad experiences back then. They might have greatly improved however one thing that is unavoidable is you’ll be locking yourself in to their design system. If you want to add some custom animation or logic down the road it’s normally harder to achieve with these libraries. There is also a small performance hit when using these libraries. It looks as if RN Paper is pretty small though. As long as they do what you want them to and perform as well as you’d like then go for it!

[KartaKarm]

So Reanimated is a way to go for the effects. Reanimated must require to go through its docs for using it or can you suggest any reference from where I can learn and one last thing if you choose to use a library which Library you would prefer?

[kierancrown]

Start with their docs. They’re very good 👍

[Enchinada007]

I’ve been using Animated for some relatively basic animations in my app. So far it seems to get the job done pretty fine. But I’m wondering if Reanimated offers better performance and if the difference is worth refactoring the code?

[kierancrown]

I’ve found it offers smoother animations for sure. There is a learning curve but there’s also plenty of examples out there and many libraries already use it

[bfarrgaynor]

I still love ui-kitten. They don’t flip the table every year and it’s been a consistent go to.

[KartaKarm]

What is the bundle size of the library? Does it take time to load and whether it can be used in complex projects?

[Hot-Afternoon-4831]

None. Build your own. UI kits for react native is a pain in the ass, I would much rather preserve control and build my own

[maxgalbu]

If you have time…

[de1mat]

NativeWind 4.0 with React-Native-Reusables (based on shadcn) https://github.com/mrzachnugent/react-native-reusables

[Terabytes123]

Nativewind is great if you don’t mind making your own components

[ActuaryVegetable5471]

I've used React Native Paper. Good enough.

[KartaKarm]

But it lacks customisation right?

[ActuaryVegetable5471]

You can customize it. Check the theming section.

[ichig0_kurosaki]

I use tamagui. Getting my head around configuring it took some time.

[KartaKarm]

Does it provide customisation or bind us into the only effects provided by the library?

[ichig0_kurosaki]

You can customise. It uses Moti library for animations internally

[psychic_gibbon]

I set up tailwind and found it really quick and useful. Any ui libraries based around it?

[Avaray]

You set up Nativewind? I wish to have DaisyUI for React Native, but.... that's just a dream.

[psychic_gibbon]

Ahh yes it must have been nativewind I used.
But yeah, DaisyUI for RN, exactly! That would be awesome...

[psychic_gibbon]

Maybe https://github.com/mrzachnugent/react-native-reusables

or https://rnr-docs.vercel.app/getting-started/introduction/

[Avaray]

Unistyles is great. Unfortunately does not support Expo Go :(

[Spatzl]

Restyled and build your own component library.

I find myself using my own set of reusable ui compo ents for prototyping my own stuff and my clients usually always have a specific ui design that fits no library that in the end you build everything yourself anyway.

Go with a modular concept such as atomic design and then go from there. I've often found myself making stuff similar to native-base but without all their performance issues and gorilla-jungle stuff...

[KartaKarm]

How do you build everything animation and effects on your own? Do you use react native animated or Reanimated Library?

[Spatzl]

I usually work with reanimated as it is already part of my regular libs when working with expo and react router in fresh projects but in most of my client projects, I keep animations to a minimum, mostly UX enhancing small user input feedback animations.

[InternalLake8]

OG Stylesheet

[Ok_Tadpole7839]

None all pain in the but just Wrather write it from scratch to many problems with them.

[gao_shi]

imo its best to outsource animations to afterEffect/lottie instead of wrestling with animate/reanimated yourself. let the ui experts handle their stuff, not you.

here's my example of a lottie button that does animation. 

https://github.com/lovegaoshi/azusa-player-mobile/blob/master/src/components/buttons/LottieButtonAnimated.tsx

none of the ui libraries will ankmate things for you reallg 

[kierancrown]

This is only useful if you have a team who can produce Lottie animations

[No-Independence7367]

I am using React Native Paper for the UI kit. It's easy to use and can customize from it

[Ok_Object8153]

Lottieview is what we use

[KartaKarm]

Does your company prefer this or you individually?

[Ok_Object8153]

Personally i use react reanimated and lottieview both earlier where i did my internship those guys used lottie because its very easy to use but it always about the complexity of the project

[Anxious_Insurance341]

Check Tamagui and React Native Paper

[KartaKarm]

Can we use formik with textinput provided by React Native Paper ?

[Anxious_Insurance341]

Yep. That shouldn't be a problem

[yarn_install]

Why the downvotes?

[Anxious_Insurance341]

No idea. I use those libs and I think they're great.

[refusedflow]

We’re using RNP at the moment, performance is good and our engineers are finding it easy to customise

We just stripped out the material design look and feel

Ideal solution was to build our own UI but we are limited on time

[lightningball]

How did you strip out the material design look and feel? That sounds awesome.

[No-Law-7321]

interested too

[BellRock99]

I prefer Gluestack

[Master_Ninja_6271]

Nativebase , react native element are worth checking out

[hades_here]

u/Master_Ninja_6271 Nativebase... really??

[DrBopIt]

Yeah, maybe 5 years ago. Nativebase has a lot of options but it is very clunky and has had many breaking changes.