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:
- 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
- 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
- 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
- react-native-material-textfield
Comes from the same author of the dropdown package (listed above).
npm install --save react-native-material-textfield
- 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
- 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
- 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
- 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
- react-native-color
Color components for React Native. JavaScript-only, for iOS and Android.
npm i --save react-native-color
- 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.
material-ui is a react based implementation of the material design system. It is meant for web development and the output that you get is HTML/ CSS (which are the building block of every web page).
react-native is a framework that lets you build native mobile apps using the power and syntax of React. The native programming language of mobile apps depends on the mobile-os you are currently running. The React Native framework gives you the ability to program in React style, and the output will be a compiled version (os-specific) using the native OS language.
Unfortunately, those two don't really work together, and you can't just take any React lib and use it in your react-native code.