Image for post
Image for post

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.

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…

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Yeah i know .. lets see some real implementations .

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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.

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.

Image for post
Image for post

4.

Comes from the same author of the dropdown, this text input follows

  • Material design compliance
  • Animated state transitions
  • Accessory view
  • Helper text
  • RTL support
  • Pure java script implementation above all
Image for post
Image for post

5.

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…

Image for post
Image for post

6.

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)
Image for post
Image for post

7.

Modal DateTimePicker provides support for this feature in iOs & Android using native implementation.

Image for post
Image for post
Image for post
Image for post

8.

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

Image for post
Image for post
Image for post
Image for post
Customised the library to support landscape.. perks of having a pure javascript module ;)

9.

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
Image for post
Image for post

10.

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.

Image for post
Image for post

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]

UPDATE: Feature based Boilerplate Added

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

Hey, I’m looking for remote part-time opportunities

Written by

Android | React Native Dev | Flutter Enthusiast! - Interested in remote opportunities

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store