Menu
I've been using react for a while now and I know that Material UI https://material-ui.com/ 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?
347
If you're building a cross-platform mobile app, it's a good idea to base your app's UI/UX on Material Design, Google's own design language, which it uses in all its mobile apps.
Material-UI supports the most recent versions of React, starting with ^16.8. 0 (the one with the hooks). Have a look at the older versions for backward compatibility.
No you can't. react-native uses react underneath but you can't use pure HTML elements in react-native. This is why you need to implement react-native version of that library. Especially when its a visual component.
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-navigation 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 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 Comes from the same author of the dropdown package (listed above).
npm install --save react-native-material-textfield 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 Modal DateTimePicker provides support for this feature in iOs & Android using native implementation.
npm i react-native-modal-datetime-picker @react-native-community/datetimepicker 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 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 Color components for React Native. JavaScript-only, for iOS and Android.
npm i --save react-native-color Great if you're looking for grid lists that have support for dynamic width & height.
npm install --save react-native-masonry 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.
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
