Super Cool Material UI components in React Native!
Curated list of awesome UI components with native feel & performance built in react native…
This is the second part to ‘Super Cool Material UI components in React Native!’. I have personally integrated all these…medium.com
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.
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.
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.
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.
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
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…
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)
Modal DateTimePicker provides support for this feature in iOs & Android using native implementation.
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
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 —
🚀 React Native Boilerplate Updated 0.57.1. Contribute to victorkvarghese/react-native-boilerplate development by…github.com
I have used this boilerplate for building facebook messenger clone in react native [WIP]
- Building Facebook Messenger Clone in React Native. [Medium Article]
Facebook Messenger Implementation using react-native - victorkvarghese/react-native-messengergithub.com
UPDATE: Feature based Boilerplate Added
Feature based Architecture for developing Scalable React Native Apps (0.57.4) …github.com
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.
More articles from me
Airbnb published a lengthy, five-part blog post announcing and explaining their decision sunsetting React Native and…medium.com
This is the second in a series of blog posts in which i try to build to native features in messenger using react-nativemedium.com
This article covers designing and developing functional component with 60 fps animationscodeburst.io
I started working wth react native around 18 months ago. As an android developer transition from Java/Android to…blog.cloudboost.io