Is it possible to use Material UI library with React Native?
Matthew Harrington 
I've been using react for a while now and I know that Material UI is the UI library built for react. My question is - Is it possible to use this library (which is built for react) with react-native ?
On some research I found react-native has another UI library called react-native-paper, but I was wondering if Material-UI can fit together with react-native?
17 Answers
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:
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-navigationLooking 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-dropdownI 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-carouselComes from the same author of the dropdown package (listed above).
npm install --save react-native-material-textfieldIf 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-menuModal DateTimePicker provides support for this feature in iOs & Android using native implementation.
npm i react-native-modal-datetime-picker @react-native-community/datetimepickerGreat 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 --saveThis 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-modalColor components for React Native. JavaScript-only, for iOS and Android.
npm i --save react-native-colorGreat if you're looking for grid lists that have support for dynamic width & height.
npm install --save react-native-masonryUPDATE:
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.
Material Design Library for ReactNative
Making your React Native apps look and feel native, React Native Paper is a high-quality, standard-compliant Material Design library that has you covered in all major use-cases.
Unfortunately, the material-UI library specially built for ReactJS which is the web counterpart of the React Native is not applicable to the React Native app development ecosystem. This does not mean that you cannot provide the native feel to the app you are developing. The library providing every material theme does not come out of the box for React Native. However, there are some packages that provide components with material theming. Likewise, you can also check some amazing React Native themes that give your app a modern look and feel. They simply make an app look amazing and appealing to the user group. It's all about improvising and adapting.
I was working with react-native-elements and have a good performance to Android and IOS. However, its complicated change the style of components.
Since a few months i tried with NativeBase and its perfect. It have a lot of components kind MaterialUI and works perfectly in Android and IOS. Its a very completly library.
1There's another solution if you're willing to abandon react-native and go for the progressive web app route (with something like Capacitor).
Note that this can be trickier than something like react-native or expo. For example, getting something equivalent to react native's safe area views is going to require some manual twiddling (with a plugin like this one). In general, I've found that accessing native functionality is always just a little more complicated.
yes we can but not as in react js web developement i am adding an example --React Native Material UI (iOS and Android supported)
