Super Cool Material UI components in React Native!
Curated list of awesome UI components with native feel & performance built in react native…
Next Part
When I first started using react native in 2015, things seemed pretty hard to implement. There were not enough libraries or UI tool kits available in react native to build native like UI elements. But things have changed, React Native is the latest trend now (and flutter too …)
I have worked on small, medium & huge projects in react native. Most of the time there will be a predesigned UI for us to work. Some are heavily customized while some pretty materialized & clean. There are a number of UI kits available in react native now. But the problem is we don’t want to use a heavily packed UI toolkit just for using a module like FAB !!
There are a lot of advantages using a toolkit instead of independent libs. But for small -medium projects most of us don’t want to dependent on such huge toolkits as it increases the complexity & maintaining the project can get cumbersome.
So I have a decided to put together small curated list of libraries that will help you build material UIs in react native with no effort. This libs are very small in size & maintained regularly.
1. react-native-material-bottom-navigation
This material UI library allows us to add a super cool material bottom navigation with all its perks in pure javascript. It has no native dependencies, easy to use & customise , feels stunning…
Looks dope right. You can use this awesome library with react navigation as well (This feature is removed in the latest version.. ). But right now it’s a standalone lib that can be coupled with a custom navigator/router just like i did.
2. react-native-snap-carousel
I have used a number of swiper components in react native. Everyone of them works ok & yeah ... finishes the functionality. But this one take things to a whole new level. I don’t need to explain this, you can see the functionality below.
Yeah i know .. lets see some real implementations .
This library is heavily maintained and has the best support. snap-carousel uses flat list with lazy load support. So things will look stunning with great performance.There is an example app also if you want to see different types of implementations.
3. react-native-material-dropdown
Looking for drop-down components that looks and feels great as native?. This material drop-down library does just that. Material drop-down with consistent behavior on iOS and Android , which also has support for landscape mode as well. Give it a try I’m sure you will love it compared to other modal drop downs.
4. react-native-material-textfield
Comes from the same author of the dropdown, this text input follows
- Material design guidelines compliance
- Animated state transitions
- Accessory view
- Helper text
- RTL support
- Pure java script implementation above all
5.react-native-material-menu
Looking for overflow menu support in react native? This lib does the job great. You can use this in toolbar as an overflow menu(more menu). Considering other options, this one has better animations & ripple support with pure java script implementation that feels native…
6.react-native-snackbar
Looking for toast / snack bar options that can be shown easily at the end of an api call or saga completion without specifying them in render(), then you can use this one.
- No need to add them in render()
- You can easily invoke them, from business logic.(for eg: at the end of a saga)
7. react-native-modal-datetime-picker
Modal DateTimePicker provides support for this feature in iOs & Android using native implementation.
8.react-native-color
Color components for React Native. JavaScript-only, for iOS and Android. You can use these awesome animated library to pick colors in the app. It has support for different options & you can also tweak things to make it work in landscape as well
9.react-native-masonry
Looking for grid lists that has support for dynamic width & height. react-native-masonry is built with the following features and functionalities baked in 🍰:
- Dynamic Column Rendering
- Progressive Item Loading
- Device Rotation
- On-press Handlers
- Custom Headers & Captions
- Optimized to Rendering Large List
- Support for Third-Party Image components
- Automatic Sizing Based on Available Space
10.react-native-country-picker-modal
This picker module allows the user to select countries from the list. It has support for search, lazy loading and a great theming support (dark mode)as well.
React Native BoilerPlate
I have built this react native boilerplate that has support for almost all libs including redux, react navigation and redux-saga. The boilerplate is well structured and properly separating logic & concerns.
If anyone want to use it Refer —
I have used this boilerplate for building facebook messenger clone in react native [WIP]
React Native BoilerPlate React Query + Zustand
- Building Facebook Messenger Clone in React Native. [Medium Article]
That’s it for now folks! There are a lot of other react native modules out in the wild. Its pretty easy to build new modules if you know what kind of things exist in react native.
You can easily suggest new features & additions to the product when you have clear cut idea about the different UI elements. Some of them can make your product look great .. while some others can ruin the entire app.
Choose wisely…. ;)
The best thing about a boolean is even if you are wrong, you are only off by a bit.
