Material UI components are a good choice to save time in the react app development. You can consider Material Design as a guideline to improve the UI. Here we have shared the guidelines on using the material UI in basic React native applications. However, you can create complex applications while following the above concepts. You can even hire react developers for your project for better assistance.
How to implement Material UI in React Native?
No doubt every developer has the vision to implement beautiful websites and applications. To achieve this milestone, developers have to work hard. However, it is now possible to craft excellent applications. Thanks to inbuilt libraries in React Native. Material UI is one such library, defined as a ready-made UI component set. It includes inputs, buttons, and dialogues and so on. The material UI components are a good way to save time.
Material Design was developed in the year 2014 by Google. Therefore, it includes many of the foremost Google’s principles. Its three core principles are as follows.
MaterialUI is a metaphor: In the Material design system, material refers to the components. The main aim of Google is to make that material highly relevant to reality. The material metaphor is a unifying theory of rationalised space and the motion system.
Motion offers meaning: Animation in Material Design means continuity. Animation always gives context to the whole application.
Bold, Graphic, Intentional: The bold graphics and the colour are good to show the hierarchy of the information. Through the page, they guide the user’s eyes.
With the help of material UI, professionals could easily import and implement the user interface while using different components. This will save a significant amount of the developer’s time in the react native development. The main inspiration of Material UI widgets is based on Google’s principles for creating the user interface.
Also read: React 18 Features
How to use Material UI in React Native?
To deal with Material UI you first make sure that npm is already installed on your system. This will be useful in downloading and installing the required dependencies in the app. Also, you will need a code editor like Visual Studio Code.
First of all, to create the React project, you need to run the following command in terminal or cmd.
npx create-react-app materialuicase After completing installation open the folder in the code editor. After that, type npm start to launch the development server. Just navigate to http://localhost:3000/ to view the default React app in your browser.
Installing the material-UI dependencies
Now to access the different components or functionalities you need to install Material-UI. For this, open the terminal and be inside of the applications master folder.
Type npm install @material-ui/core in the terminal To use the material-UI icons in the project, you just need to run the command below.
Npm install @material-ui/icons To confirm that the above dependencies have been installed
"dependencies": {
"@material-ui/core": "^4.11.2", //material-ui
"@material-ui/icons": "^4.11.2", //material-ui icons
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
}, Modification in the project
There are certain files and templates present in every react project. To avoid confusion in the same we need to eliminate these elements. This will be done by opening the app.js file and then delete all the code present in the div tag.
import './App.css';
function App(){
return (
{/* code goes here */}
);
}
export default App; After running this code and refreshing the browser button tagged Press Me words will be visible. To do good to the styling button, we can use props, which are essential properties passed down to the element.
The Material-UI button which is imported in the project is styled as below.
<Button color="primary" variant="contained"> Press me </Button> Meanwhile we can also import and use the TextField widget in the project as below.
<TextField id="name" label="Name" variant="outlined"/> You need to follow the below code if you want to create a separate component and import it into another file. We have created a separate NavBar component and a new file in the src folder with the name NavBar.js.
import React from "react";
import {AppBar, Toolbar, Typography} from '@material-ui/core';
function Header(){
return (
<AppBar position='static'>
<Toolbar>
<Typography>React Navbar Example</Typography>
</Toolbar>
</AppBar>
);
}
export default Header;
By adding <header/> in the div tag we can also use Widget
import './App.css';
import {Button} from '@material-ui/core'; //importing material ui component
import {TextField} from '@material-ui/core';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Header from './NavBar.js';
function App() {
return (
<div className="App">
<br/>
<Header/> //importing the navbar component
<Button color="primary" variant="contained"> Press me </Button>
<br/><br/>
<TextField id="outlined-basic" label="Name" variant="outlined" />
<br/><br/>
<AccountCircle/>
</div>
);
}
export default App; Material UI components application
Import all the material UI components to use in your project. The following code is useful.
import './App.css';
import {Button} from '@material-ui/core'; //importing material ui component
function App() {
return (
<div className="App">
<Button> Press me </Button> //using the material ui component in our project
</div>
);
}
export default App; Reason to use Material Design
There are many reasons to include Material Design. The material UI incorporation into the project always proved to be a great benefit in the project.
- Developers get good guidelines to make an accurate tactile user interface.
- Designers can easily think about the hierarchy of the information with Material UI.
- Lots of free resources are available such as colour pallets, icons, templates and wireframes.
- It is easy to achieve the desired milestone in a short time with the use of Material Design.
Also read: Grommet Library in React Application
Some Reasons to avoid Material UI
- Material UI is strongly associated with Google and that’s the reason it is limited to Android devices only.
- The material design might be complex for beginners. They may also find it hard to implement.
- Some of the usability issues in the Material design can make websites and applications unfriendly to the users.
- Some of the elements like floating action buttons may be useless.
- A lot of overhead may be a result due to extensive use of animations.
