Is it possible to use Material UI library with React Native?

Material UI is built for ReactJS (web apps), so it doesn’t really work together with the React Native framework. However, here’s a list of a few libraries to get you started:


  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 & customize, plus it feels stunning.

npm install react-native-material-bottom-navigation

  1. react-native-material-dropdown

Looking for drop-down components that look and feel great as native?. This material drop-down library does just that. The Material UI drop-down with consistent behavior on iOS and Android, which also has support for landscape mode as well.

npm install --save react-native-material-dropdown

  1. react-native-snap-carousel

I have used a number of swiper components in react native. Every one of them works ok, but this one takes things to a whole new level.

npm install --save react-native-snap-carousel

  1. react-native-material-textfield

Comes from the same author of the dropdown package (listed above).

npm install --save react-native-material-textfield

  1. react-native-material-menu

If you’re looking for overflow menu support in React Native, this lib will do a great job. You can use this in the toolbar as an overflow menu(more menu).

npm install --save react-native-material-menu

  1. react-native-modal-datetime-picker

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

npm i react-native-modal-datetime-picker @react-native-community/datetimepicker

  1. react-native-snackbar

Great if you’re looking for toast/snack bar options that can be shown easily at the end of an e.g. API call.

npm install react-native-snackbar --save

  1. react-native-country-picker-modal

This picker module allows the user to select countries from the list. It has support for search, lazy loading. Dark mode included.

npm i react-native-country-picker-modal

  1. react-native-color

Color components for React Native. JavaScript-only, for iOS and Android.

npm i --save react-native-color

  1. react-native-masonry

Great if you’re looking for grid lists that have support for dynamic width & height.

npm install --save react-native-masonry

UPDATE:

React Native lets you build your own Native Components for Android and iOS to suit your app’s unique needs. However, there is also a thriving ecosystem of community-contributed components. To get you started ASAP may I suggest checking out the Native Directory to find what the community has been creating and how you can benefit from it.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)