Published in · 4 min read · Jul 4, 2019
--
Introduction
UI Kitten is an Open Source React Native framework of UI components.
We have released the first version about 3 years ago, with a beautiful demo application. And now we’re glad to present a new major release, including a ton of new trending features and an updated demo application. Let’s take a quick overview at Top 5 features you don’t want to miss.
#1: Design System based 🎨
Starting with version 4.0 UI Kitten becomes a React Native implementation of Eva Design System. This means that components visual style and behavior are based on Design System rules and agreements.
What does it mean being a part of the Design System?
The answer is pretty simple. This means UI Kitten components are pretty styled out of the box. Furthermore, if you want to customize some parts of your application without missing its look & feel, you can do it with ease simply extending or changing a design system configuration. Look how:
#2: Runtime Theming 🌚
One of the most trending web and mobile application features in 2019 is Dark Mode. And this is not just a trending feature. Starting from the next update of iOS and Android SDK you will need to support it before publishing your app to App Store and Google Play.
UI Kitten v4 supports it out of the box. Being a part of Eva Design System, UI Kitten can apply any theme configured with Eva rules. We provide both Light and Dark themes which you can switch in a runtime. Furthermore, following the theme configuration rules, you can simply extend or create your own themes.
Here is a short tutorial of how you can support runtime theme switch.
#3: Highly customizable components 🔧
Having styled components out of the box built on top of the Design System does not mean you’re restricted in customizing it. Starting from v4, we provide 3 ways you can do this:
Inline Styling. A quite simple way of styling components everybody knows. Simply pass your style object to a component and it will extend or override default styles.
Extendable Design System configuration. In version 4 we introduce you a new way of styling any property of any state in which component is currently rendered. A good example is changing a backgroundColorof a Button component while it is pressed.
This can make your components really flexible without creating a ton of StyleSheet boilerplates in your code. That’s how Eva Design System works 🔥 We also have a great documentation on it. Check it out to start using on an advanced level.
Extendable Themes. This option is really useful when you want to change a primary color and make it everywhere in your app. Just look at the demo
#4: Built with TypeScript 🛡️
The previous version of UI Kitten was written in pure JavaScript. Sometimes this is cool, especially for folks who love building apps without “redundant” external tools. But TypeScript becomes more popular in frontend development, and this is a nice tool that allows you to create more stable applications. We also had a lot of complaints in version 3 about incorrect usage of props etc. Starting from v4, we have no way publish a framework which you’re going to use with such type of bugs.
#5: Demo Application 📱
Conclusion
Being one of the main contributors, I can say that I have found this framework really easy to use. We have built a Kitten Tricks app on top of UI Kitten, and while we had to integrate one or another feature, we were able to find several not really easy to use places in a framework API. We did a lot of development iterations before we found it really useful and finally published the new version. But in case you have any enhancement proposal or a feature request, we’re always welcome to discuss it in a project repo.
Useful links
Made with 🖤 by Akveo team. Happy coding!
