Top 9 React Native UI Component Libraries in 2023

when I got started with react native I quickly asked myself what's the best UI component in library and what are people actually using in 2023 because react native only gives us some basic types like a text a view or a scroll View and I asked this question on Twitter and I think people were kind of interested in this as well because everybody said something else so here are nine UI libraries that you can use with react native in 2023 and we're gonna start with number nine number nine is restyle and I only discovered this because somebody left a comment on my tweet and this is a library that really helps us to implement Design Systems so it's not really a library of components there are a lot of helper functions too set up your design system and then create themed components based on your design system it has about 2k stars on GitHub so not too bad so go check it out if you want to implement an important design system in your application position 8 goes to glue stick UI which is actually in Alpha right now but by the creators of a package that we're gonna see later up in this list so this is universal head less component it's very early days but the cool thing is that this should in best case be for reacts Nick JS and react native meaning not only mobile but also web support under the hood glue stick is actually also using dank which is also an alpha which is in Universal and performance styling library that is used and the actual components provided by glue stick UI so if you go into those components you're going to find similarities to a very uh popular package which is actually native base we're going to come back to that later but glue stick is so far at 200 stars on GitHub so definitely something we should keep an eye on police number seven goes to react native UI lib which is bio Wix which I think is actually also the tool for creating websites and this is a comprehensive tool set of really awesome components just look at the examples these look amazing so if you use them like this in your application you're gonna pretty soon have an epic application the foundation is based off colors and settings this pretty much looks the same in all the places then we have a theme and then we sometimes also have some modifiers that we can easily apply to our react native application with 5K stars on GitHub this is one of the most uh or the biggest uh Rick native component libraries and many people replied that they were using this because really there are tons of components so go check it out Wix is certainly an idea for your react native app place number six goes to UI kitten something I definitely didn't have on my list when I initially looked for UI libraries for react native so this is also especially made for design system based on the IFA design system which I actually never heard about but multi-theming is a big thing so you can easily switch out your theme this is dark and light of course and this is based on the Eva design system which is kind of made for companies to create their own styling and the cool thing is they have a working example app for all the other things that I tried the apps didn't work the snack or the expo's next stuff didn't work for any of these you can check out the application on the App Store the examples look somewhat good they're okay but to me all of this feels very generic and very cold so I don't know if I'm a big fan of this you can certainly create great styling with this and of course almost 10K stars on GitHub means this project is definitely active maintained in something worth checking out place number five in my internal ranking goes to probably a little Underdog called native win and for me coming from web development loving Tailwind CSS it just feels good to use Tailwind also in react native and we can do this with Native wind so we can use exactly the same stuff that we're used to from CSS from Tailwind CSS on the web Flex Flex row yes we're gonna have the same problems that we have on web with infinite long lines of Tailwind CSS but if you already know this from the web or your team knows this from the web it's going to be really really easy to style your react native application with Taylor and CSS and Native wind it has only 2K stars on GitHub but maybe we're gonna see a little uprise of native wind in the future when Tailwind becomes even more dominant while some might say this is deprecated I still think this deserves place number four so let's talk about Native base native base is actually what I selected when I just got started with react native and I found this to be the most used and most popular package with almost 20K stars on GitHub native base was or probably still is one of the best packages for react native with tons of great components that you can use however I found the setup to be somewhat complicated it to some degree and also some components didn't really feel like a great up-to-date uh components so if I check out the button I didn't really feel like this is a native button or neither iOS nor Android but maybe we're gonna see an improved version as I already said glue stick UI is also by the creators of native base it's Pro currently using the UI components from native base so be aware of that that native base might not receive big update in the future if they transition to glue sticks so definitely keep an eye on this and and be aware of that effect but besides that native base is still a great library of components you can check out the demo here on their page most of this works really great with their theme provider and their additional utilities and you can certainly also create epic applications with Native base the third place of our nine Rec native UI component libraries goes to react native paper react native paper is widely used and a great implementation of material design the components definitely closely follow everything related to material design and the good things they also have a working application that we can check out and yes the examples in here certainly look great I can't deny this most of what you're gonna find in the dummy application here of components looks really really great now I've been never a big fan of material design for iOS however looking at the different stuff that we got in here I could kind of get used to this and I feel like having an application that uses this feels really great simply because the native look and feel of this is very native even though material design is normally not used on iOS so 10K stars on GitHub it is a worthy Contender and I think choosing react native paper for your application is a great choice and I'm probably or I'm very sure that you wouldn't regret using it the second place in our ranking goes to react native elements this looks on the outside definitely not as sexy as the other packages do but it is definitely also the biggest one with 23 000 stars on GitHub so many many Innovative developers choose this simply because of the Simplicity and because react native elements combines everything in one it's an all-in-one one you I could you can of course use it with Expo and react native CLI and it has everything that we've seen before we got styled components we got a theme provider and we also got tons of components out of the box that looks somewhat good they also have an application which apparently didn't work for me to install so this one with Expo go definitely did not work for me because this is an all-in-one Library they have many many components that you can check out most of them look somewhat good but you can of course apply your own styling to them as you require it but they're usually a very good starting point for your application so although this doesn't look as up to date as other libraries and the components we've seen before I think it deserves a second place in our ranking simply because it is that popular still in the react native world and the winner of today's video is tamagui yes this is probably still an unknown package for you because it only comes with about 6K stars on GitHub but this is the up and coming package for react native and Beyond because the focus of this is not just react native it is also web and an optimized compiler so share more code between web and Native apps while improving rather than sacrificing developer experience performance and code maintainability the Creator Nate has also recently been on the syntax FM podcast go check out that episode give it a listen where he explains what tamagui exactly is about and where it shines so although tamagoi doesn't have as many components as other libraries have I think the component it shows are really really great these look really really Sleek I always like to check out the card yes and most libraries don't get the card Shadow right but this card certainly looks super Sleek uh linear grading we got everything we need and I think this deserves the first place because it is up and coming it is a great idea behind this and most importantly we see the same with Expo happening right now Expo was for react native of an IOS and Android but with a new export router with a new SEO tag that was announced At fjs Con we're gonna see that Expo evolves from react native only for IOS and Android also for the web and if we think about this tamagui perfectly fits into this as timeout guys focus is also not only react native but also giving us great styling on the web so Expo and tamagoi for 2023 I think that should work alright so that's it for today's rating video I hope you enjoyed it and you learned something let me know in the comments what your preferred package would you think the Tema GUI is the thing for 2023 and beyond for react native developers I kinda think so that we should focus on this and I will definitely create something about it very very soon leave your opinion right here below the video in the comments and I will hopefully catch you in the next video so until then Happy coding Simon

Channel: Simon Grimm

Views: 67,546

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic academy, ionic tutorial, capacitor, web development, mobile apps, mobile app development

Id: SfJGBbv-qQw

Length: 10min 12sec (612 seconds)

Published: Tue Jul 11 2023